title: Treating the edges of a div like a JS window object
body: <p>I'm new to Javascript, HTML, and CSS. I read through <a href="http://jsfiddle.net/Blando/E3X78/" rel="nofollow">this code</a> for a Matrix animation (it's not mine).</p>
  
  <p>The animation lies within the canvas in the HTML:</p>
  
  <pre><code>&lt;canvas id="c"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>The animation uses the edges of the window to determine when to reset the "drops":</p>
  
  <pre><code>c.height = window.innerHeight;
  c.width = window.innerWidth;
  </code></pre>
  
  <p>I want the animation to instead detect the edges of a <code>div</code> that I would put around the canvas like this:</p>
  
  <pre><code> &lt;div&gt;
  &lt;canvas id="c"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is: how can I change the <code>window.innerHeight</code> to an object representing the <code>div</code>, so that I can re-size the animation by simply altering the dimensions of the <code>div</code>? </p>