HTML BEGINS..









LIST & LINKS






TEXT & DIVs







IMAGES





MULTIMEDIA








TABLES



FORMS






CANVAS



















DRAG DROP API



WEB-WORKERS



GEOLOCATION



SVG & MATHML





WEB SOCKETS



HTML5 APPLICATIONS





ENTITIES Ref








REFERENCES













HTML5 Canvas Pixel Manipulation


Use canvas methods to Modify and manipulate pixel data on the Canvas.


Get Pixel Data from Image : getImageData(x, y, width, height)

1.Any rectangular section of the canvas can be accessed with method getImageData(x, y, width, height).

2.Each Pixel data can be read from the accessed section using canvas's data property.

3.Each pixel in the canvas data consists of four componets red , blue , green , alpha

They are stored in a one dimensional CanvasPixelArray array with color values expressed in integers from 0-255 and alpha component quantised to nearest 1/255th and then multiplied by 255.

4.For example if the first pixel is RGBa(255, 100, 170, 1) then the first four values in the CanvasPixelArray is 255, 100, 170 , 255.

HTML5 Canvas Pixel Manipulation, CanvasPixelArray

Example: Canvas getImageData(x, y, width, height).

Give it a TRY! »


Creating Image Data : createImageData(width, height)

1.We can create images from scratch by using method createImageData(width, height).

2.It creates a new imageData object which are intialized to color transparent black (i.e RGBa values are (0, 0, 0, 0)). Also, the dimensions of imageObject is as defined in the method.

Example: Canvas CreateImageData( width, height).

Give it a TRY! »


Manipulate Image Data: putImageData(imageData, X, Y)

1.You can manipulate each pixel on the canvas using method putImageData(imageData, X, Y).

2.Use method putImageData(imageData, X, Y, SubX, SubY, SubWidth, SubHeight) to manipulate only

a subsection of the image. Here, (SubX, SubY) denote the origin of the image.

The imageData is overwritten and the original data is lost when this method is used.

Example:Manipulate pixels with putImageData(imageData, X, Y)

Give it a TRY! »



Related Examples

Related Tags