# HTML Canvas Makes Everything Bolder On Right Side

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:

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>

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.

• Holy cow! I can't believe that I spent all that time when all I did was mix up my width and height! Thanks! – GPinskiy Feb 9 '16 at 20:38