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