0
\$\begingroup\$

For some strange and sudden reason, my canvas seems to make lines thicker and darker on the right ~1/4-ish. I have tried multiple browsers and different computers and they all have the same rendering issue EXCEPT for Chrome for Android. Here is a screenshot of the test lines that I drew: enter image description here

And here is the code in case anyone was wondering:

var canvas = document.getElementById("foreground");
var context = canvas.getContext("2d");
var height = 450;
var width = 600;

canvas.width = width;
canvas.height = height;

function draw() {
  context.clearRect(0, 0, canvas.height, canvas.width);

  for (var i = 1; i < (800 - (0 * 2)) / 35; i++) {
    context.beginPath();
    context.moveTo(200 + (i * 35) + 0 | 0, 50 + 0 | 0);
    context.lineWidth = 1;
    context.lineTo(200 + (i * 35) + 0 | 0, 50 + 800 - 0 | 0);
    context.strokeStyle = "black";
    context.stroke();
    context.closePath();
  }

  for (var i = 1; i < (800 - (0 * 2)) / 35; i++) {
    context.beginPath();
    context.moveTo(200 + 0 | 0, 50 + (i * 35) + 0 | 0);
    context.lineWidth = 0.5;
    context.lineTo(200 + 800 - 0 | 0, 50 + (i * 35) + 0 | 0);
    context.strokeStyle = "black";
    context.stroke();
    context.closePath();
  }

  requestAnimationFrame(draw);
}

draw();
<div id="container">
  <canvas id="foreground"></canvas>
</div>

\$\endgroup\$

1 Answer 1

3
\$\begingroup\$

context.clearRect() has a method signature of:

context.clearRect(x, y, width, height)

In your code, however, you are passing the height and width in the incorrect positions. Changing your call to

context.clearRect(0, 0, canvas.width, canvas.height)

fixes the issue.

MDN clearRect() documentation.

\$\endgroup\$
1
  • \$\begingroup\$ Holy cow! I can't believe that I spent all that time when all I did was mix up my width and height! Thanks! \$\endgroup\$
    – GPinskiy
    Feb 9, 2016 at 20:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .