javascript - Copy Canvas Image into a Frame -

as starting point have image on canvas:

var canvas = $('canvas')[0]; var ctx=canvas.getcontext("2d"); var img=document.getelementbyid("scream");    ctx.drawimage(img,0,0,240,297); 

now add frame image on same canvas. this:

i first replace image frame.

next try copy old canvas content inside of frame

i try that:

   var frame = document.getelementbyid("frame");     var ctx = $('canvas')[0].getcontext("2d");    var dst = ctx.canvas;        ctx.drawimage(frame,0,0, 240, 297);       ctx.drawimage(dst, 40, 40); 

but code not working because copies frame again canvas instead of image: here can see demo: https://jsfiddle.net/35mxfsv0/

what wrong? have change? thanks

as assign original canvas dst, when draw on canvas, dst changed (because they're pointing same canvas).

so have assign new canvas dst, , draw image origin dst, draw frame on origin, , last, draw dst's image origin.

window.onload = function() { // make safe window.onload ensures images loaded.        var canvas = $('canvas')[0];      var ctx=canvas.getcontext("2d");    var img=document.getelementbyid("scream");      ctx.drawimage(img,0,0,240,297);      //start of code    var frame = document.getelementbyid("frame");      // comment out demo in same scope, ctx have want.    //var ctx = $('canvas')[0].getcontext("2d");    // create new canvas, , draw image on origin canvas it.    var dst = document.createelement('canvas');    dst.width = canvas.width;    dst.height = canvas.height;    var dstctx = dst.getcontext('2d');    dstctx.drawimage(canvas, 0, 0);    // above suppose canvas should do.    //var dst = ctx.canvas;              // draw frame    ctx.drawimage(frame,0,0, 240, 297);      // frame not opacity one, have copy specific position.    ctx.drawimage(dst, 0, 0, dst.width, dst.height, 10, 10, 220, 277);  }

img{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <canvas id="mycanvas" width="240" height="297" style="border:1px solid #d3d3d3;">  </canvas>            <img src="http://www.w3schools.com/tags/img_the_scream.jpg" id="scream"/>      <img src="http://www.wpclipart.com/page_frames/picture_frames/wood_picture_frame.jpg" id="frame"/>

however, if still have access scream image, can draw frame first, draw image on it:

var canvas = $('canvas')[0];  var ctx=canvas.getcontext("2d"); var img=document.getelementbyid("scream"); var frame = document.getelementbyid("frame");  ctx.drawimage(frame,0,0, 240, 297); // 10, 10 seems fit frame. ctx.drawimage(img, 10, 10);