title: Merge Multiple Canvases and Download as Image
body: <p>I'm attempting to merge two HTML canvases into a single canvas and then download that as an image. My code is as below:</p>
  
  <pre><code>function downloadCanvas() {
      var bottleCanvas = document.getElementById('bottleCanvas');
      var designCanvas = document.getElementById('editorCanvas');
  
      var bottleContext = bottleCanvas.getContext('2d');
      bottleContext.drawImage(designCanvas, 69, 50);
  
      var dataURL = bottleCanvas.toDataURL("image/png");
      var link = document.createElement('a');
      link.download = "bottle-design.png";
      link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      link.click();
  }
  </code></pre>
  
  <p>My problem here seems to be the following line: </p>
  
  <pre><code>bottleContext.drawImage(designCanvas, 69, 50);
  </code></pre>
  
  <p>This is supposed to draw the contents of one canvas onto the other, which it does, but then prevents the latter part of the code from running and downloading the image. When I remove this particular line the download function works fine, but unfortunately only downloads one of the canvases.</p>
  
  <p>My question therefore is either: What am I doing wrong here? or How would I merge two HTML canvases and then download it as an image.</p>
  
  <p>(On another note, my above code for downloading only works well in Chrome - in other browsers I am unable to set the name of the file and set the file extension.)</p>