HTML and CSS Reference
In-Depth Information
The Canvas Pixel Manipulation API
The Canvas Pixel Manipulation API gives us the ability to “get,” “put,” and “change” indi-
vidual pixels, utilizing what is known as the
CanvasPixelArray
interface.
ImageData
is the
base object type for this manipulation, and an instance of this object is created with the
cre-
ateImageData()
function call. Let's start there.
The
createImageData()
function sets aside a portion of memory to store an individual
pixel's worth of data based on the following three constructors:
imagedata = context.
createImageData
createImageData
(sw, sh)
imagedata = context.
(sw, sh)
The
sw
and
sh
parameters represent the
width
and
height
values for the
ImageData
object. For example,
imagedata=createImageData(100,100)
would create a 100×100
area of memory in which to store pixel data.
imagedata = context.
createImageData
createImageData
(imagedata)
imagedata = context.
(imagedata)
The
imagedata
parameter represents a separate instance of
ImageData
. This constructor
creates a new
ImageData
object with the same width and height as the parameter
ImageData
.
imagedata = context.
createImageData
createImageData
(()
This constructor returns a blank
ImageData
instance.
imagedata = context.
ImageData attributes
An
ImageData
object contains three attributes:
ImageData.height
This returns the height in pixels of the
ImageData
instance.
ImageData.width
This returns the width in pixels of the
ImageData
instance.
ImageData.data
ImageData.data
This returns a single-dimensional array of pixels representing the image data. Image data
isstoredwith32-bitcolorinformationforeachpixel,meaningthateveryfourthnumberin
this data array starts a new pixel. The four elements in the array represent the red, green,
blue, and alpha transparency values of a single pixel.
