将画布图像复制到框架中

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"/>