title: Using a Draw function in JS to create many objects
body: <p>I'm using Javascript and html to making an interactive isotope grid, From 1H to 72Fe, which is 513 total isotopes. Each element has a different number of isotopes. So far I've just been copying and pasting the draw command for every single one, like below. Is there a way I can write a function that can do this?</p>
  <pre><code>  var canvas = document.getElementById(&quot;mycanvas&quot;);
  
    var ctx = canvas.getContext(&quot;2d&quot;);
    // 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);
  </code></pre>
  <p>I've tried writing this, but it doesnt seem to work</p>
  <pre><code>var x = 181;
  var y = 121;
  var i;
  function draw() {
  for (i = 0; i &lt; 19; ++i) {
   ctx.strokeRect(x, y, 20, 20);
   y += 20;
  
   }
  }
  </code></pre>