YouTip

# HTML canvas ImageData data property\\ \\ [ Canvas Objects](#)\\ \\ ## Example\\ \\ Create 100*100 pixels's ImageData Objects，itsinEach pixel is set to 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 »](#)\\ \\ * * *\\ \\ ## Browser Support\\ \\ \\ \\ Internet Explorer 9、Firefox、Opera、Chrome and Safari Supports the ImageData data property.\\ \\ **Note:**Internet Explorer 8 And earlier versions do not support the element.\\ \\ * * *\\ \\ ## Definition and Usage\\ \\ data propertyReturns an Object. This Object contains the specified's ImageData Objects'sImage data.\\ \\ For ImageData Objects in'sEach pixel consists of four components'sinformation, i.e. RGBA Value：\\ \\ R - Red (0-255）\\ \\ G - Green (0-255）\\ \\ B - Blue (0-255）\\ \\ A - alpha Channel (0-255; 0 is transparent, 255 is fully visible)\\ \\ color/alpha The information exists as an array and is stored in the ImageData Object's data propertyin。\\ \\ **Example：**\\ \\ Change ImageData Objectsin'sThe first pixel turns red'sSyntax：\\ \\ imgData=ctx.createImageData(100,100);\\ \\ imgData.data=255;\\ \\ imgData.data=0;\\ \\ imgData.data=0;\\ \\ imgData.data=255;\\ \\ Change ImageData Objectsin'sThe second pixel turns green'sSyntax：\\ \\ imgData=ctx.createImageData(100,100);\\ \\ imgData.data=0;\\ \\ imgData.data=255;\\ \\ imgData.data=0;\\ \\ imgData.data=255;\\ \\ **Tip：**Please refer to [createImageData()](#)、 [getImageData()](#) and [putImageData()](#) method to learn more about ImageData Objects'sKnowledge.\\ \\ * * *\\ \\ ## JavaScript Syntax\\ \\ | JavaScript Syntax： | _imageData_.data; |\\ | --- |\\ \\ * * *\\ \\ [![Image 14: Canvas ObjectsReference Manual](http: