CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
John Smith
John Smith

Reputation: 6269

Copy Canvas Image into a Frame

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

Upvotes: 0

Views: 1808

Answers (2)

Bikram Das
Bikram Das

Reputation: 1

Please change id of your html and js file.

Upvotes: 0

fuyushimoya
fuyushimoya

Reputation: 9813

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

Upvotes: 1

Related Questions