Question

I am trying to create a grid in the canvas as below

var canvas = $("#canvas");
var ctx = canvas.get(0).getContext("2d");

ctx.strokeStyle = "rgb(0, 0, 0)";
for(x=0;x<=300;x++){
  for(y=0;y<=300;y++){  
   ctx.strokeRect(x, y, 20, 20);
  }
}

but it just fills the HTML5 canvas instead of drawing squares with border. Can someone enlighten me on what I’m doing wrong here?

Answer 1

I re-wrote it like this

var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");


context.strokeStyle = "rgb(255, 0, 0)";
for(x=0; x<5; x++){
 for(y=0; y<5; y++){
  context.strokeRect(y*20, x*20, 20, 20);
 }
}