HTML | canvas createImageData() Method
The createImageData() method is used to create a new blank ImageData object. The pixels of the new object is transparent black by default.
There are two syntaxes of the createImageData() method:
- It is used to create a new ImageData object with the specified dimensions(in pixels):
Syntax:var imgData = context.createImageData(width, height);
- It is used to create a new ImageData object with the same dimensions as the object specified by anotherImageData. It doesn’t copy the image data.
Syntax:var imgData=context.createImageData(imageData);
Parameter Values:
- width: It denotes the width(in pixels) of the new ImageData object.
- height: It denotes the height(in pixels) of the new ImageData object.
- imageData: It is the anotherImageData object
Example:
<!DOCTYPE html><html> <body> <h3 style="color:green">GeeksforGeeks</h3> <h3>HTML canvas createImageData() Method</h3> <canvas id="myCanvas" width="200" height="200" style="border:2px solid ;"> </canvas> <p id=g eeks></p> <script> var can = document.getElementById("myCanvas"); var gfg = can.getContext("2d"); var imgData = gfg.createImageData(150, 100); var i; for (i = 0; i < imgData.data.length; i += 3) { imgData.data[i + 0] = 100; imgData.data[i + 1] = 0; imgData.data[i + 2] = 0; } gfg.putImageData(imgData, 10, 10); </script> </body> </html> |
Output:
Supported Browsers:
- Chrome
- Mozilla Firefox
- Internet Explorer 9.0
- Opera
- Safari
Please Login to comment...