Html5 Canvas Draw Image

Here is my question I kind of not understand what is the sx and sy is for in below function context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh); what I really mean is if we c

Solution 1:

(sx, sy) is the top-left corner of the source rectangle (within the source image) which are going to draw to the destination. Take a look at the diagram below:

[Reference]

sx=0,sy=0 is different from sx=300,sy=300 because they refer to different source rectangles.

Solution 2:

var img = new Image();
img.onload = function init_sketch() {
img.src = 'http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg';
context.drawImage(img, 0, 0);
}