title: JS Canvas animate grid elements individually
body: <p>I'm generating a grid of hexagons by using a for loop and I'm having some issues</p>
  
  <pre><code>    for (var i=0; i &lt;= rows; i++) {
          for (var j=0; j &lt;= cols; j++) {
              ctx.save();
              ctx.translate(0+i*distX, 0+j*distY);
              drawHexagon(ctx);
              ctx.fill();
              ctx.restore();
          }
      }
  </code></pre>
  
  <p>My end goal is to create a grid of hexagons that move away from the mouse cursor when it's moving around the page, with an area of influence. I can't work out how to draw a path between each of the hexagons and I'm also having an issue with trying to animate the hexagons.</p>
  
  <p>I'm still a canvas newbie, I went through the tutorials on Mozilla's developer network and all of the animations were on singular objects, not objects generated in a grid.</p>
  
  <p>I was thinking that I should try and store the grid and affect it later but I'm not sure how I would go about that, I also don't think canvas works like that.</p>
  
  <p>I found this which is pretty much what I want to do but I can't understand how it works:
  <a href="http://codepen.io/soulwire/pen/Ffvlo" rel="nofollow">http://codepen.io/soulwire/pen/Ffvlo</a></p>
  
  <p>I'm fine combing through it now, if anyone could walk me through it that would be great :)</p>
  
  <p>Edit: I've since gotten a grid drawn behind the dots, I'd like to manipulate this too. I still don't understand the codepen linked above, it's a little over my head.</p>