title: html/javascript canvas drawImage without 2times loading
body: <p>I want to place an image in a HTML5 canvas. I found some sample code which worked, but the image was loaded 2 times when I actually only need 1. I can hide one of the images with JavaScript or CSS, but I'm looking for a way where the image only needs to load once.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;img id="img" src="img.png" width="150px" height="150px"&gt;
      &lt;canvas id="canvas" width="200px" height="200px"&gt;&lt;/canvas&gt;
  
      &lt;script type="text/javascript"&gt;
          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");
          var img = document.getElementById("img");
          ctx.drawImage(img, 0, 0);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>