HTML5 CANVAS draw image

Question

Here is my question

I don't seem to understand what sx and sy are for the function below

context.drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh);

what do I really mean if we change the values ​​of sx and sy and set our values ​​of dx and dy to fix, let's say dx = 0 and dy = 0, does something really change for our image on the canvas, when do we set sx = 300 and sy = 300 compared to sx = 0 and sy = 0? I mean, the destination image is still at the location dx = dy = 0, even we set sx and sy to different values, right? I know this is a stupid question, but I just need to know the answer, thanks!

Answer 1

(sx, sy) - the upper left corner of the source rectangle ( inside the source image), which will be drawn to the destination. Take a look at the chart below:

[Link]

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

Answer 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); }