html - html5に入力せずに境界線で長方形を描画します

Question

以下のようにキャンバスにグリッドを作成しようとしています

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);
  }
}

ただし、境界線で正方形を描画するのではなく、HTML5キャンバスを塗りつぶすだけです。誰かが私がここで間違っていることについて私に教えてもらえますか？

Answer 1

こんな感じで書き直しました

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);
 }
}