Canvas gradient is diagonal when it should be vertical

Question

I have some javascript code to generate a gradient from 14 colors:

var example = document.getElementById('example');
var context = example.getContext('2d');

var grdBnds = [0, 0, 200, 30]
var grd = context.createLinearGradient(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]);
grd.addColorStop((1/14)*0, "rgb(0, 0, 0)");
grd.addColorStop((1/14)*1, "rgb(191, 191, 191)");
grd.addColorStop((1/14)*2, "rgb(115, 115, 115)");
grd.addColorStop((1/14)*3, "rgb(245, 182, 181)");
grd.addColorStop((1/14)*4, "rgb(147, 252, 253)");
grd.addColorStop((1/14)*5, "rgb(87, 120, 246)");
grd.addColorStop((1/14)*6, "rgb(177, 251, 162)");
grd.addColorStop((1/14)*7, "rgb(80, 176, 51)");
grd.addColorStop((1/14)*8, "rgb(230, 230, 75)");
grd.addColorStop((1/14)*9, "rgb(187, 109, 93)");
grd.addColorStop((1/14)*10, "rgb(235, 51, 35)");
grd.addColorStop((1/14)*11, "rgb(188, 39, 246)");
grd.addColorStop((1/14)*12, "rgb(117, 20, 124)");
grd.addColorStop((1/14)*13, "rgb(191, 191, 191)");

context.fillStyle = grd;
context.fillRect(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]);

<canvas id="example" width="1000" height="400"></canvas>

As you can see, the gradient lines are being generated at a diagonal angle to the right, when they should be going vertically.

Does anybody know why this is happening, and how I could fix it?

I know you can also make gradients with CSS, but for what I am doing I need to make the vertical gradients with canvas.

Answer 1

createLinearGradient generate a gradient from two points, (x0,y0) and (x1, y1). This is why it takes four parameters.

fillStyle defines the color, gradiant or pattern used by fillRect to fill your rectangle. You are using gradiant here.

fillRect takes four parameters: x, y, width, and height.

Here is a snippet that uses the canvas dimensions to set the different parameters.

var canvas = document.getElementById('example');
var context = canvas.getContext('2d');

var colors = [
    "rgb(0, 0, 0)",
    "rgb(191, 191, 191)",
    "rgb(115, 115, 115)",
    "rgb(245, 182, 181)",
    "rgb(147, 252, 253)",
    "rgb(87, 120, 246)",
    "rgb(177, 251, 162)",
    "rgb(80, 176, 51)",
    "rgb(230, 230, 75)",
    "rgb(187, 109, 93)",
    "rgb(235, 51, 35)",
    "rgb(188, 39, 246)",
    "rgb(117, 20, 124)",
    "rgb(191, 191, 191)"
];

// Horizontally
var grd = context.createLinearGradient(0, 0, canvas.width, 0);

// Vertically
var grd = context.createLinearGradient(0, 0, 0, canvas.height);

for (let index = 0; index < colors.length; index++) {
    const color = colors[index];
    grd.addColorStop(index/colors.length, color);
}

context.fillStyle = grd;
context.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="example" width="1000" height="400"></canvas>