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)

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:

createImageData() Method in HTML5 canvas Code Explanation

”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:

createImageData() Method in HTML5 canvas Output

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).