It appears to be a straightforward issue, and I might just be missing something obvious. Here is the code snippet:
window.onresize = function(){
init.canvas.width = window.innerWidth;
init.canvas.height = window.innerHeight;
}
var init = {
canvas: new Object(),
ctx: new Object(),
constructCanvas: function(){
this.canvas = document.getElementById("canvas");
this.ctx = this.canvas.getContext("2d");
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
}
}
init.constructCanvas();
var a = 20;
var b = 20;
init.ctx.lineWidth = 4;
function loop(){
init.ctx.fillStyle = "Blue";
init.ctx.fillRect(0,0,init.canvas.width,init.canvas.height);
init.ctx.moveTo(a,b);
init.ctx.lineTo(a+=9,b);
init.ctx.stroke();
}
setInterval(loop,100);
The expected behavior should result in smaller line segments of length 9 being drawn and cleared on each subsequent loop iteration, but currently, a single long line is continuously drawn, and the fillRect call does not seem to have any effect.