Canvas get image data method and related topics

So when it comes to working with canvas there is the get image data method that can be used to get image data from a canvas. In addition there is also the put image data method as well that can be used to put that data into a canvas, and there is also the ImageData constructor that can be used to create an instance of image data from scratch.

1 - Get image data basic example

So a basic example of using the get image data method might involve just a hard coded html element and a link to an external javaScript file that will contain some javaScript that will make used of the get image data method.

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>canvas get image data</title>
</head>
<body>
<canvas id="the-canvas" width="320" height="240"></canvas>
<script src="basic.js"></script>
</body>
</html>

In the basic.js javaScript file I just get the canvas and the 2d drawing context and use the 2d drawing context to draw a little something to the canvas. I can then use the get image data method to get a image data for a section of that canvas. I just need to call ctx.getImageData and pass the x and y position and width and height that I want.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 32, 32);
ctx.strokeStyle = 'green';
ctx.globalAlpha = 1;
ctx.lineWidth = 1;
ctx.strokeRect(1, 1, 3, 3);
var imgData = ctx.getImageData(1, 1, 3, 3);
var i = 0;
while (i < imgData.data.length) {
console.log(imgData.data.slice(i, i + 4));
i += 4;
}

What is returned is an instance of the ImageData constructor.

2 - put image data example

So once I have an instance of ImageData I can then do something with that data, but then I might want to draw that data back to a canvas element. So this is where the put image data method comes into play.

1
2
3
4
5
6
7
8
9
10
11
12
13
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 32, 32);
ctx.strokeStyle = 'green';
ctx.globalAlpha = 1;
ctx.lineWidth = 1;
ctx.strokeRect(3, 3, 5, 5);
var imgData = ctx.getImageData(3, 3, 5, 5);
imgData.data.forEach(function (v, i,data) {
data[i] = v === 0 ? 0 : 255;
});
ctx.putImageData(imgData,3,3);

3 - ImageData constructor example

I might want to just create an instance of ImageData by itself without having to use the get image data method to do so.

1
2
3
4
5
6
7
8
9
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 32, 32);
// single yellow pixel
var data = new Uint8ClampedArray([ 255,255,0,255]);
var img = new ImageData( data,1,1)
ctx.putImageData( img, 1,1);