There is such code:

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.strokeRect(50, 50, 200, 200); var pix = ctx.getImageData(0,0,600,600); for(var i = 0; i <= pix.data.length; ) { if(pix.data[i] > 0) { pix.data[i] = 133; pix.data[i+1] = 20; pix.data[i+2] = 154; } i = i + 4; } ctx.putImageData(pix,0,0); 
 <canvas width="600" height="600" id='canvas'></canvas>

If I choose on the basis of pix.data == 0 , then repaints the contour in an arbitrary color. Why doesn't it work for the area around and inside the square?

  • If, before drawing the outline, fill the entire canvas with white (draw a rectangle to fit the canvas), then everything works ... - Natalya
  • But the question is not closed. I wonder why this is happening - Natalya
  • If you change the alpha channel (try to twist it to 255), there is no effect - Natalya

2 answers 2

Use fillRect, not strokeRect

  • Not in this case. I don't need just a shaded square. I need to first draw the outline, and then on the canvas fill in all the pixels that are not black. - Natalya

The problem was solved by the fact that I had previously filled the canvas with white color, and then performed all the manipulations on it. Why such a problem arose, I did not understand.