title: Converting canvas to image does not include images on the canvas
body: <p>I want to convert a canvas to a png image and put it on a page. My problem is that if I have an image on my canvas, it does not get converted. This is my HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset='UTF-8'&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="./assets/css/general.css"&gt;
  
          &lt;script type="text/javascript" src="./codetests.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="wrapper" id="wrap1"&gt;
  
              &lt;img id="persphoto" src="./images/nouserimage.png" style="display:none;"&gt;
  
              &lt;input type="hidden" id="persname" value="Test Testinen"&gt;
              &lt;input type="hidden" id="adress" value="Testgatan 1"&gt;
              &lt;input type="hidden" id="postaddr" value="12345 Teststad"&gt;
              &lt;input type="hidden" id="homephone" value="0123456789"&gt;
              &lt;input type="hidden" id="cellphone" value="0712345678"&gt;
  
              &lt;canvas src="" id="canvasresult" width="296px" height="420px" /&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt; drawCanvas(); &lt;/script&gt;
          &lt;script type="text/javascript"&gt; convertCanvasToImage(canvasresult); &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JavaScript is the following:</p>
  
  <pre><code>// Converts canvas to an image
  function convertCanvasToImage(canvas) {
      var image = new Image();
  
      image.src = canvas.toDataURL("image/png");
      //return image;
  
      document.getElementById("wrap1").appendChild(image);
  }
  
  function drawCanvas() {
      var c = document.getElementById("canvasresult");
  
      h=parseInt(document.getElementById("canvasresult").getAttribute("height"));
      w=parseInt(document.getElementById("canvasresult").getAttribute("width"));
  
      //get context
      var ctx = c.getContext("2d");
  
      //Fill the path
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(0,0,w,h);
  
      var img=document.getElementById("persphoto");
      ih=parseInt(document.getElementById("persphoto").getAttribute("height"));
      iw=parseInt(document.getElementById("persphoto").getAttribute("width"));
  
      var maxw = 150;
      var maxh = 150;
  
      if (ih &gt; iw) {
          var newh = 150;
          var neww = Math.round(150 * (iw / ih));
      } else if (ih &lt; iw) {
          var newh = Math.round(150 * (ih / iw));
          var neww = 150;
      } else {
          var newh = 150;
          var neww = 150;
      }
  
      var newx = Math.round((296 - neww) / 2);
      var newy = 60 + Math.round((150 - newh) / 2);
  
      img.onload = function() {
          ctx.drawImage(img,newx,newy,neww,newh);
      };
  
  
      ctx.fillStyle = "#000000";
      ctx.font = '10pt Verdana';
      ctx.textAlign = 'center';
      ctx.fillText(document.getElementById("persname").value, w/2, h*0.65);
      ctx.fillText(document.getElementById("adress").value, w/2, h*0.69);
      ctx.fillText(document.getElementById("postaddr").value, w/2, h*0.73);
      ctx.fillText(document.getElementById("homephone").value, w/2, h*0.77);
      ctx.fillText(document.getElementById("cellphone").value, w/2, h*0.81);
  
  
      var canvasData = c.toDataURL("image/png");
      /*
      document.getElementById("canvasdata").value = canvasData;
      document.getElementById("hidepersphoto").value = document.getElementById("persphoto").value;
      document.getElementById("hidepersname").value = document.getElementById("persname").value;
      document.getElementById("hideadress").value = document.getElementById("adress").value;
      document.getElementById("hidepostaddr").value = document.getElementById("postaddr").value;
      document.getElementById("hidehomephone").value = document.getElementById("homephone").value;
      document.getElementById("hidecellphone").value = document.getElementById("cellphone").value;
      */
  }
  </code></pre>
  
  <p>My problem is as I said that when I call <code>convertCanvasToImage</code> any images currently on the canvas doesn't get converted. The result is: </p>
  
  <p><img src="https://i.stack.imgur.com/q7KZv.png" alt="enter image description here"></p>
  
  <p>Can anyone spot where the problem is?</p>