HTML Canvas Makes Everything Bolder On Right Side - html

Question

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>

Answer 1

You're not clearing the canvas properly: you swapped width and height. The requestAnimationFrame then draws everything again, and since only part of the image is cleared, the part that's not, gets 'thicker'.
The fix:
context.clearRect(0, 0, canvas.width, canvas.height);
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.width, canvas.height);
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>

Answer 2

Simply remove draw from requestAnimationFrame.
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.lineTo(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();
<div id="container">
<canvas id="foreground"></canvas>
</div>