title: draw svg file on html canvas programmatically
body: <p>I've been having some trouble drawing an svg onto a canvas with javascript.  I would like this to work...
      HTML</p>
  
  <pre><code>&lt;canvas class="buttonCanvas" id="handCanvas" height="60px" width="60px"  /&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function drawHandCanvas(){
     var canvas = document.getElementById('handCanvas');
     var ctx = canvas.getContext('2d');
     var img=  document.createElement('img');
     img.src='images/handCursor.svg';
     img.width = 60;  img.height = 60;
     ctx.drawImage(img,0,0);
  }
  drawHandCanvas();
  </code></pre>
  
  <p>But it doesn't.</p>
  
  <p>If I add an SVG element I can get this to work.
  HTML</p>
  
  <pre><code>&lt;canvas class="buttonCanvas" id="handCanvas" height="60px" width="60px"  /&gt;
  &lt;img id="handSVG" src="images/handCursor.svg"/&gt;
  </code></pre>
  
  <p>Javascript </p>
  
  <pre><code>function drawHandCanvas(){
      var canvas = document.getElementById('handCanvas');
      var ctx = canvas.getContext('2d');
      var img=document.getElementById('handSVG');
      img.width = 60; img.height = 60;    
      setTimeout(function(){
          ctx.drawImage(img,0,0);
          img.hidden='true';
      }, 10);         
  }
  drawHandCanvas();
  </code></pre>
  
  <p>Note that in this 2nd method of doing it I have to use a setTimeout method to get it to work and add an img element at the end of my down, which I hide after drawing on the canvas.  Super hacky!  If I just use window.onload instead of setTimeout, it doesn't work.  It will hide img, but the drawImage() does nothing, presumably because the canvas isn't ready when the window is already done loading.  Any thoughts?</p>