title: simple HTML5 canvas image not displaying
body: <p>I'm new to this - I just can't figure out why this isn't working. When I remove Display:none from HTML, the image works correctly so I know the path to the image is correct. But it's not drawing on the canvas. Thanks for your time.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas width="840" height="900" id="Canvas6"&gt;
       Your browser does not support this feature.
      &lt;/canvas&gt;
  &lt;img src="image/logo.png" id="img1" width="825" height="272" style="display:none;"&gt;
  &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Main.JS JAVASCRIPT:</p>
  
  <pre><code>var theCanvas = document.getElementById('Canvas6');
  
  if (theCanvas &amp;&amp; theCanvas.getContext) {
  var ctx = theCanvas.getContext("2d");
  if (ctx) {
  
          //Create a variable to hold our image
          var  srcImg = document.getElementById("img1");
  
          //Draw an image directly onto the canvas
          ctx.drawImage(srcImg, 0,0);
  
          //Draw a scaled down image
          //drawImage(srcImg, dx, dy, dw, dh)
  
  
      }
  }
  </code></pre>