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.
Search WWH ::




Custom Search