HTML canvas createImageData() Method
Last Updated :
12 Jun, 2023
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...