title: canvas drawImage of a div
body: <p>I am trying to draw an image on to a canvas. My source is a div that has a collection of text and images. Is this possible to do? I have tried to put some code together but it failed as the canvas is empty.</p>
  
  <p><strong>Div</strong></p>
  
  <pre><code>&lt;div id="puzzle"&gt;
  Some text
  &lt;img src="sky" /&gt;
  text text
  &lt;img src="sun.png /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>code</strong></p>
  
  <pre><code>&lt;canvas id="mycanvas" width="300" height="150"&gt;&lt;/canvas&gt;
  var canvas = document.getElementById("mycanvas");
  var ctx = ccanvas.getContext("2d");
  var img = document.getElementById("puzzle");
  img.onload = function(){
      ctx.drawImage(img,0,0,40,40);
  }
  </code></pre>