title: canvas image disappears
body: <p>I have this function to load image on canvas:</p>
  
  <pre><code>function myImage() {
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    var img=document.getElementById("image");
    ctx.drawImage(img,0,0);
  }
  </code></pre>
  
  <p>Image loads fine, and there are other images on canvas, but with this image, when I use any control to move or resize the other images, this one disappears.</p>
  
  <p>to load image I use:</p>
  
  <pre><code>&lt;img id="image"  src="1.png" width="64" height="64" onclick="myImage(this)"&gt;
  </code></pre>
  
  <p>Well I updated the function:</p>
  
  <pre><code>function myImage() {
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    var img=document.getElementsByClassName("test");
    ctx.drawImage(img,0,0);
  }
  </code></pre>
  
  <p>and the images</p>
  
  <pre><code>&lt;img class="test" src="1.png" width="64" height="64" onclick="myImage(this)"&gt;
  &lt;img class="test" src="2.png" width="64" height="64" onclick="myImage(this)"&gt;
  &lt;img class="test" src="3.png" width="64" height="64" onclick="myImage(this)"&gt;
  </code></pre>
  
  <p>but I get this error:</p>
  
  <pre><code>Uncaught TypeError: Type error 
  myImage
  onclick
  </code></pre>
  
  <p>in the last line of the function</p>