The imageData Height is the property of HTML canvas.
The property returns the height of an imageData object, in pixels.
Syntax for imageData height property in HTML5 Canvas:
imgData.height;
Sample coding for imageData height property in HTML5 Canvas:
Tryit<!DOCTYPE html><html><head><title>Wikitechy height property</title></head><body><h2>Wikitechy ImageData Height Property</h2><canvas id="Wikitechy Canvas" width="300" height="200"
style="border:1px solid blue;"></canvas><script>var c = document.getElementById("Wikitechy Canvas");
var context = c.getContext("2d");
var imgData = context.createImageData(150, 150);
alert("Height of imgData is: " + imgData.height);
var img;
for (img = 0; img < imgData.data.length; img += 4)
{
imgData.data[img+0] = 0;
imgData.data[img+1] = 255;
imgData.data[img+2] = 0;
imgData.data[img+3] = 255;
}
context.putImageData(imgData, 20, 20);</script></body></html>
Code Explanation for imageData height property in HTML5 Canvas:
“wikitechyCanvas” is used to define the value id attribute for canvas element.
The getElementById(); method is used to get the element that has the id attributes with the identified value (“wikitechyCanvas”).
The createImageData(); method creates a new, blank ImageData object(150,150).
alert(); method is used to show the alert message.”height of the imgData is:150”.
For();loops through a block of code a number of times.
For every pixel in an ImageData object there are four pieces of information.The color red (from 0-255).so declared the value red is 0. Diclared the value green is 255.
Diclared the value blue is 0. The alpha channel from 0-255; diclared the value is 255.
The putImageData() method puts the image data from a specified imageData object back onto the canvas.(imgData,20,20).
Output for imageData height property in HTML5 Canvas:
The canvas Rectangle with blue border.
Show the output values is fully green 255 and transparent value is fully 255. The imageData height is displayed in the HTML canvas.
Browser Support for imageData height property in HTML5 Canvas:
