html tutorial - createImageData() Method in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Createimagedata method in html5 canvas - html examples - html programs
- The createImageData() method is one of the canvas method.
- The createImageData() method is used to create a new , blank imageData object.
- The new object's pixel values are transparent black by default color.
- Every pixel in an imageData object has four pieces of information, there are RGBA values.
- R- The red color (from 0 to 255).
- G- The green color (from 0 to 255).
- B-the blue color (from 0 to 255).
- A-the alpha channel (from 0 to 255) Where 0 is transparent and 255 is fully visible.
- The alpha/ color information is held in array and is stored in the data property of the imageData object.
- The array's size is 4 times the size of the imageData object: width*height*4.
Syntax for createImageData() Method in HTML5 Canvas:
var imgData=context.createImageData(imageData);
var imgData=context.createImageData(width,height);
Parameter values for createImageData() Method in HTML5 Canvas:
Parameter | Description |
---|---|
width | The width of the new ImageData object, in pixels. |
height | The height of the new ImageData object, in pixels. |
imageData | Another ImageData object. |
Sample Coding for createImageData() Method in HTML5 Canvas:
Tryit<!DOCTYPE html>
<html>
<head>
<title>wikitechy-HTML Canvas createImageData()</title>
</head>
<body>
<h1>wikitechy-HTML Canvas createImageData() with example:</h1>
<canvas id="wikitechyCanvas" width="500" height="250"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
var canvas = document.getElementById("wikitechyCanvas");
var abc = canvas.getContext("2d");
var imgData = abc.createImageData(200, 200);
var j;
for (j = 0; j < imgData.data.length; j += 4)
{
imgData.data[j+0] = 0;
imgData.data[j+1] = 0;
imgData.data[j+2] = 255;
imgData.data[j+3] = 255;
abc.putImageData(imgData, 60, 30);
}
</script>
</body>
</html>
Code Explanation for createImageData() Method in HTML5 Canvas:

- ”wikitechyCanvas” is used to declare the id value of the canvas tag.
- The getElementById() method is used to draw the element from id.
- getContext(): returns an object that provides methods and properties for drawing on the canvas.
- Create a variable “ImageData” the value will be set as (200,200) in x,y direction.
- The forloop is used to checking the new object pixel values. For every pixel in an ImageData object there are four pieces of information, the RGBA values:
- The red color value is set as (0).
- The green color value is set as (0)
- The blue color value is set as (255)
- The alpha channel value is (255; 0 is transparent and 255 is fully visible)
- The image will get canvas using putImageData(imgData, 60, 30).
Output for createImageData() Method in HTML5 Canvas:

- canvas is used to draw a rectangle an createImageData() method.
- Here the output is displayed by blue color rectangle.
- The new blank image will display in canvas using the putImageData(imgData, 60, 30).
Browser Support for createImageData() Method in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |
Tips and Notes
- The color/alpha information in the array is manipulated.
- The image data can copy on back to the canvas with the putImageData() method.