JavaScript canvas2d object method: drawImage()
[this page | pdf | back links]
The drawImage() method of the JavaScript
DOM object
returned by the getContext("2d")
method applied to the HTML <canvas>
element draws an image,
canvas or video onto the canvas.
There are three versions
of the createImageData() method
with the following formats and parameters (the ones with clip parameters
involve pre-clipping of the image):
context.drawImage(image, x, y)
context.drawImage(image, x, y, width,
height)
context.drawImage(image, clipx, clipy,
clipwidth, clipheight, x, y, width, height)
|
Parameter
|
Required / Optional
|
Description
|
|
clipheight
|
Optional
|
Clip height
|
|
clipwidth
|
Optional
|
Clip width
|
|
clipx
|
Optional
|
Clip x-coordinate
|
|
clipy
|
Optional
|
Clip y-coordinate
|
|
height
|
Optional
|
Height of image to use
(potentially stretching or squashing original image)
|
|
image
|
Required
|
Image / video / canvas
to be inserted
|
|
width
|
Optional
|
Width of image to use
(potentially stretching or squashing original image)
|
|
x
|
Required
|
x-coordinate of
upper-left corner
|
|
y
|
Required
|
y-coordinate of
upper-left corner
|
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)