Slicing uma imagem

[jsmoraes]

Sintaxe do código:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Código fonte:

<nabble_embed><canvas id="canvas" width="150" height="150"></canvas>
   <div >
     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
   </div></nabble_embed>
<script type="text/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);

  // Draw frame
  ctx.drawImage(document.getElementById("frame"),0,0);
}
window.setTimeout(draw, 100)
</script>