javascript - Canvas -- save final image after using destination-atop -

i using canvas drawimage() twice. 1 background image, , other kind of 'mask' used wanted image background.

the resulting image part of background that's behind overlay. want save part of image. here's example hulk's face -- want create image out of face , save on server. saving image (right-click save image as) takes full size of canvas, , not wanted face.

http://jsfiddle.net/s248a76w/

html looks like:

<canvas id="canvas" width="900" height="500"></canvas>

js:

var canvas = document.getelementbyid("canvas"); if (canvas.getcontext) {     var ctx = canvas.getcontext("2d");      //load images blended     var userpic = new image;     userpic.src = "http://img2.wikia.nocookie.net/__cb20090320033607/marvelmovies/images/5/5e/the-hulk-2003.jpg";     var masktemplate = new image;     masktemplate.src = "http://www.botaiusti.com/img/1.svg";      //set globalcompositeoperation lighter     // ctx.globalcompositeoperation = "lighter";     ctx.globalcompositeoperation = "destination-atop";      //draw source image     userpic.onload = function() {         ctx.drawimage(userpic, 100, 00);     }       //draw destination image     masktemplate.onload = function() {         ctx.drawimage(masktemplate, 340, 70);     } }