javascript - Merge Multiple Canvases and Download as Image -

i'm attempting merge 2 html canvases single canvas , download image. code below:

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(); } 

my problem here seems following line:

bottlecontext.drawimage(designcanvas, 69, 50); 

this supposed draw contents of 1 canvas onto other, does, prevents latter part of code running , downloading image. when remove particular line download function works fine, unfortunately downloads 1 of canvases.

my question therefore either: doing wrong here? or how merge 2 html canvases , download image.

(on note, above code downloading works in chrome - in other browsers unable set name of file , set file extension.)

you encountering security error caused drawing image source cross-domain onto canvas. drawing cross-domain image onto canvas "taint" canvas , disallow context.todataurl , raise security error if attempt execute todataurl. same "tainting" occur if drawimage contaminated canvas onto non-contaminated canvas.

the fix make sure images draw on canvas originate on same domain webpage.

here example of code working when using image not raise cross-domain security error:

var img=new image();  img.crossorigin='anonymous';  img.onload=start;  img.src="https://dl.dropboxusercontent.com/u/139992952/multple/fish.jpg";  function start(){      var bottlecanvas = document.getelementbyid('bottlecanvas');    var designcanvas = document.getelementbyid('editorcanvas');    var ctxb=bottlecanvas.getcontext('2d');    var ctxd=editorcanvas.getcontext('2d');      ctxb.drawimage(img,0,0);    ctxd.fillrect(50,50,50,50);      downloadcanvas();  }    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();  }

body{ background-color: ivory; }  canvas{border:1px solid red;}

<canvas id="bottlecanvas" width=300 height=300></canvas>  <canvas id="editorcanvas" width=300 height=300></canvas>

satisfying cross-origin security restrictions

you can host image on server allows cross-origin access it's images. that's in example above. dropbox.com allows specify image hosts may drawn canvas without "tainting" canvas.

you can configure s3 bucket allow cross-origin access images. link provides instructions on how set response headers server cross-origin images: http://docs.aws.amazon.com/amazons3/latest/dev/cors.html

note in example, if you're using cross-origin images, must set image.crossorigin='anonymous' flag when create image object in javascript.