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
.
CodePudding user response:
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>
CodePudding user response:
The parameters to createLinearGradient
and fillRect
are 2 different things.
var example = document.getElementById('example');
var context = example.getContext('2d');
var grdBnds = [0, 0, 000, 240]
var rectBnds = [0, 0, 360, 240]
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(rectBnds[0], rectBnds[1], rectBnds[2], rectBnds[3]);
<canvas id="example" width="1000" height="400"></canvas>