drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) takes an image, clips it to the rectangle
(sx, sy, sw, sh), scales it to dimensions
(dw, dh), and draws it on the canvas at coordinates
(dx, dy).
The source rectangle is the rectangle [within the source image] whose corners are the four points
(sx, sy),
(sx+sw, sy),
(sx+sw, sy+sh),
(sx, sy+sh).
The destination rectangle is the rectangle [within the canvas] whose corners are the four points
(dx, dy),
(dx+dw, dy),
(dx+dw, dy+dh),
(dx, dy+dh).
To draw an image on a canvas, you need an image. The image can be an existing
![]()
element, or you can create an
Image() object with JavaScript. Either way, you need to ensure that the image is fully loaded before you can draw it on the canvas.
Title:
HTML5 - Canvas draw image arguments
Description:
Source: http://diveintohtml5.info/canvas.html drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) takes an image, clips it to the rectangle...
...
Rating:
4