HTML5 Canvas Tutorials - Pixel Manipulation

Create image data

You can create image data in two ways.

1. You can provide the width and height of the imagedata directly like this:

var Imagedata = ctx.createImageData(width, height);

Here, createImageData() will return an ImageData object with pixel information preset to black transparent (0,0,0,0). The ImageData object will be 4 * width * height long array. When imagedata object is put on the canvas using the putImageData() method, it will have the width and height specified in the createImageData() method.

2. You can also pass another ImageData object as a parameter to the createImageData() method. In this case, the return value imagedata will have the same dimensions of the ImageData that is passed as parameter. However, all pixel information will be preset to black transparent (0,0,0,0).

Ex: NewImagedata = ctx.createImageData(OldImageData);

HTML Code

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");

// Create an ImageData object by specifying the width and height.
var pixelSet1 = ctx.createImageData(50,50);

// Create another ImageData by passing pixelSet1 as a parameter.
var pixelSet2 = ctx.createImageData(pixelSet1);

// Let's put both sets of ImageData on the canvas

ctx.putImageData(pixelSet1, 0, 10);
ctx.putImageData(pixelSet2, 100,10);

// Lets modify pixelSet2 and then draw it on the canvas again. We will change all the black transparent to green opaque

for(var i = 0; i < (50*50*4); i+=2)
pixelSet2.data[i] = 255;

ctx.putImageData(pixelSet2, 200,10);

}
}
</script>
<title> HTML5 Canvas - Pixel Manipulation </title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

Try Code