I can't get a continuous canvas rectangle to have a repeating linear gradient in js. Does anyone know?

Milori

I've drawn a canvas that contains consecutive rectangles, each with its own linear gradient, but I can't get the linear gradient to appear on the rectangles except for the first one. Each rectangle has the same size, and each rectangle should have the same linear gradient. I can only get the first rectangle to have the correct gradient, but none of the rest. The rest are black. Been searching on the internet and can't find an answer. Where am I doing wrong? Thanks!

Here is the pen with my code : https://codepen.io/monamoves/pen/RQvzOe

Again.

HTML：

<canvas id="fabric" width="1020" height="300">
</canvas>

CSS：

canvas {
  border: thin red solid;
}

JavaScript：

window.onload = draw;

function draw() {
var cvs = document.getElementById("fabric");
var ctx = cvs.getContext("2d");

var xcoordinate = 0;
var grd = ctx.createLinearGradient(xcoordinate, 0, xcoordinate + 20, 0);

for (var i = 0; i < 50; i++) {
  ctx.beginPath();
  ctx.strokeStyle="#ccc";
  ctx.moveTo(xcoordinate, 0);
  ctx.rect(xcoordinate, 0, 20, 300);
  ctx.stroke();
  ctx.fillStyle = grd;
  grd.addColorStop(0, "black");
  grd.addColorStop(0.5, "white");
  grd.addColorStop(1, "black");
  ctx.fill();
  xcoordinate = xcoordinate + 20;  
}
}
Kaido

You define the gradient to be only on the first rectangle at a time. The gradient doesn't follow your shape, if you tell it to be 20px wide at coordinates 0,0, every shape drawn at those coordinates will be one of the 2 extreme colors you set.

You can create a new gradient on each iteration inside the for loop, in fact you have to do that if you want to change its colorStops.

However, in your case the best solution (single gradient) is to declare the gradient only once, set the colorStops only once, and then simply modify the context's transformation matrix. Gradients are also affected.

var ctx = cvs.getContext("2d");

var xcoordinate = 0;
// set all this only once if it doesn't change
var grd = ctx.createLinearGradient(0, 0, 20, 0);
ctx.fillStyle = grd;
grd.addColorStop(0, "black");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "black");
ctx.strokeStyle="#ccc";

for (var i = 0; i < 50; i++) {
  ctx.beginPath();
  // we move the transform matrix
  ctx.setTransform(1,0,0,1,xcoordinate,0);
  // and draw always at same coords
  ctx.moveTo(0, 0);
  ctx.rect(0, 0, 20, 300);
  ctx.stroke();
  ctx.fill();
  xcoordinate = xcoordinate + 20;  
}
<canvas id=cvs></canvas>

Related

Does anyone know how I can get the code for the message box?

username A message box is a box that allows the user to write its content and has various options such as bold, italic, color, alignment, etc., to modify the text of its message! (like the box used when posting a question or answer in stack overflow) AstroCB N

Does anyone know how I can get the code for the message box?

username A message box is a box that allows the user to write its content and has various options such as bold, italic, color, alignment, etc., to modify the text of its message! (like the box used when posting a question or answer in stack overflow) AstroCB N

Does anyone have an AllJoyn On that I can provide?

Alexsander Caproni For some applications I need AllJoyn on the apk. Can someone provide it to me? John Sampson Now called Dashboard. The source code was released by Qualcomm about a year ago and can be found at : https://git.allseenalliance.org/gerrit/#/admin/