image crop canvas

image crop canvas

by Simplybj

HTML

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Pikachu_(28762224560).jpg" />
</div>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById("source");


//void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
//ctx.drawImage(image, 0, 0, 600, 600, 0, 0, 100, 100);
//ctx.strokeRect(0, 0, 100, 100);
//ctx.stroke();
DrawImage( 0, 0, 600, 600, 0, 0, 100, 100);
DrawImage( 600, 0, 600, 600, 100, 0, 100, 100);
DrawImage( 1200, 0, 600, 600, 300, 0, 100, 100);
//ctx.drawImage(image, 600, 0, 600, 600, 100, 0, 100, 100);


function DrawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
  ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
  ctx.strokeRect(dx, dy, dWidth, dHeight);
  ctx.stroke();
}