X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML canvas ImageData data Property

HTML canvas Reference HTML Canvas Reference

Example

Create a 100*100 pixels ImageData object where every pixel is set to the color red:

Canvas

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i+0]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,10,10);

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the ImageData data property.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.


Definition and Usage

The data property returns an object that contains image data of the specified ImageData object.

For every pixel in an ImageData object there are four pieces of information, the RGBA values:

R - The color red (from 0-255)
G - The color green (from 0-255)
B - The color blue (from 0-255)
A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

The color/alpha information is held in an array, and is stored in the data property of the ImageData object.

Examples:

The syntax for making the first pixel in the ImageData object red:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

The syntax for making the second pixel in the ImageData object green:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Tip: Look at createImageData(), getImageData(), and putImageData() to learn more about the ImageData object.


JavaScript Syntax

JavaScript syntax: imageData.data;


HTML canvas Reference HTML Canvas Reference

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook