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\$
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\$
  • \$\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 '16 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.