Copy Canvas Image into a Frame

Question

As starting point I have a image on my canvas:

var canvas = $('canvas')[0];
var ctx=canvas.getContext("2d");
var img=document.getElementById("scream");
   ctx.drawImage(img,0,0,240,297);

Now I would like to add a frame to this Image on the same canvas. For this:

I first replace the image with the Frame.

Next I try to copy the old canvas content inside of this frame

I try to do this like 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 the code is not working because it copies the frame again to the canvas instead of the image: Here you can see a demo: https://jsfiddle.net/35mxfsv0/

What do I wrong? What do I have to change? Thanks

Answer 1

As you just assign the original canvas to dst , when you draw anything on that canvas, the dst will also changed (because they're pointing to same canvas).

So you have to assign a new canvas to dst , and draw the image from origin to dst , then draw the frame on origin , and last, draw dst's image to origin.

 window.onload = function() { // Make it safe that window.onload ensures all 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 MY CODE var frame = document.getElementById("frame"); // Comment out as we demo in same scope, ctx is already have what we want. //var ctx = $('canvas')[0].getContext("2d"); // Create a new canvas, and draw the image on the origin canvas to 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 is what you suppose the canvas should do. //var dst = ctx.canvas; // Draw frame ctx.drawImage(frame,0,0, 240, 297); // As your frame is not an opacity one, you have to copy to 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 you still have the access to that scream image, you can just draw frame first, then 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 to fit the frame.
ctx.drawImage(img, 10, 10);

Answer 2

请更改您的html和js文件的ID。