Hey there, I'm trying to create a JavaScript/canvas grid but running into some issues. Here's what I have so far in my code: var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");
var width = 600;
var height = 700;
canvas.width=width;
canvas.height=height;
function Cell(x,y,width,height){
this.x=x;
this.y=y;
this.width=width;
this.height=height;
this.draw=function(){
ctx.rect(this.x,this.y,this.width,this.height);
ctx.stroke();
}
}
var x = 0;
var y = 0;
var width = 20;
var height = 20;
var cell = new Cell(x,y,width,height);
var rows = 35;
var cols = 30;
function drawGrid(){
for(var i=0; i<rows; i++){
for(var j=0; j<cols; j++){
cell.y+=cell.height;
cell.x+=cell.width;
cell.draw();
}
}
}
setInterval(drawGrid,1);
I've managed to get it working somewhat as seen here: The current grid progress I'm hoping to expand this and fill the screen with rectangles. Any assistance would be greatly appreciated! :)