Example: Framing an image

by farhatdz

HTML

<html>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
   <div >
     <img style="display:none;" id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
     <img style="display:none;" id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
   </div>
   <a id="down_res" download="triangle.jpg"><button type="button" onClick="draww()">Download</button></a>
 </body>
</html>

JavaScript

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  // Draw slice
  ctx.drawImage(document.getElementById('source'),
                33, 71, 104, 124, 21, 20, 87, 104);
}
function draww() {
  // Draw frame
    var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(document.getElementById('frame'), 0, 0);}