HTML and CSS Reference
In-Depth Information
Name
Description
Example
Instantiates a new blank
ImageData
object with the
width
w
and height
h
or with
the same dimensions as
imagedata
.
createImageData(w, h)
createImageData
(imagedata)
context.createImageData
(100,200);
drawImage(image, dx, dy)
drawImage(image, dx, dy,
dw, dh)
drawImage(image, sx, sy,
sw, sh, dx, dy, dw, dh)
Draws an image specified by
image onto the canvas. The
image is placed at
(dx,dy)
.
If
dw
and
dh
are specified, the
image will have that width and
height, respectively. In the last
case, the section of the image
to be placed on the canvas
is specified by the rectangle
defined by
sx
,
sy
,
sw
, and
sh
.
context.drawImage
(img,200,75,100,100,50,
50,300,300);
context.drawImage
(img,0,0,400,400);
Returns an
ImageData
object
that contains the pixel data
for the rectangle that starts at
(sx, sy)
with a width
sw
and
height
sh
.
getImageData (sx, sy,
sw, sh)
var img = context
.getImageData(0, 0,
100, 100);
putImageData( imagedata,
dx, dy[, dirtyX,
dirtyY, dirtyWidth,
dirtyHeight])
Writes the specified
ImageData
to the canvas.
context.putImageData
(img, 75, 75);
data
Represents the pixels in the
image.
alert(img.data.length);
height
Height of the image in pixels.
alert(img.height);
Width of the image in pixels.
width
alert(img.width);
T
ABLE
3-21
canvas ImageData API Methods and Properties
Compatibility
HTML5
Firefox 1.5+,
Opera 9+, Safari 2+
Notes
• When this element was initially introduced in 2004 by Apple, it caused some degree
of controversy in the Web community because developers assumed that it would
open the floodgates to vendor-specific extensions.
• Under some Safari implementations, the close
</canvas>
tag is not required or
understood.