Javascript 在JS中使用Draw函数创建多个对象

我正在使用Javascript和html制作一个交互式同位素网格，从1H到72Fe，总共513个同位素。每种元素都有不同数量的同位素。到目前为止，我只是复制和粘贴了每一个的draw命令，如下所示。有没有一种方法可以编写一个函数来实现这一点

  var canvas = document.getElementById("mycanvas");

  var ctx = canvas.getContext("2d");
  // hydrogen
  ctx.fillRect(1, 1, 20, 20);
  ctx.fillRect(1, 21, 20, 20);
  ctx.strokeRect(1, 41, 20, 20);
  ctx.strokeRect(1, 61, 20, 20);
  ctx.strokeRect(1, 81, 20, 20);
  ctx.strokeRect(1, 101, 20, 20);
  ctx.strokeRect(1, 121, 20, 20);

我试过写这篇文章，但似乎不管用

var x = 181;
var y = 121;
var i;
function draw() {
for (i = 0; i < 19; ++i) {
 ctx.strokeRect(x, y, 20, 20);
 y += 20;

 }
}

var x=181；
变量y=121；
var i；
函数绘图（）{
对于（i=0；i<19；++i）{
ctx.strokeRect（x，y，20，20）；
y+=20；
}
}

使用for循环并根据您的要求对同位素进行条件化，如果这有助于您还需要了解“同位素列表中的位置”如何构成“x/y坐标”-只要您能为此制定规则，您可以使用

for

循环在需要的位置绘制所有框。