Image manipulation

Create Image Data

The createImageData() is a method that creates a new ImageData object that is blank. This new object, by default, has pixel values equal with transparent black.

For each pixel in this new object, there are four pieces of information, the RGBA values.

We will create blank image data for 3 new canvas elements:

<canvas id="myCanvas2" height="272" width="400"></canvas>
<canvas id="myCanvas3" height="272" width="400"></canvas>
<canvas id="myCanvas4" height="272" width="400"></canvas>

We'll grab the canvas elements and the graphics contexts here:

var canvas2 = document.getElementById("myCanvas2"); 
var context2 = canvas2.getContext('2d'); 
var canvas3 = document.getElementById("myCanvas3"); 
var context3 = canvas3.getContext('2d'); 
var canvas4 = document.getElementById("myCanvas4"); 
var context4 = canvas4.getContext('2d');

Now we' ll get the image context for these canvas elements, and we will create a new ImageData object with the correct width and height:

var imgData2 = context2.createImageData(canvas2.width, canvas2.height);
var imgData3 = context3.createImageData(canvas3.width, canvas3.height);
var imgData4 = context4.createImageData(canvas4.width, canvas4.height);