Manipulating raw pixels


show more Manipulating raw pixels provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas show less
please wait ...

Manipulating raw pixels

Probably one of the coolest and most powerful features of the HTML5 canvas is that your script can now get access to raw pixel data on the canvas and manipulate the pixels directly. You can access the individual pixel data as an array of bytes on the canvas. Then this data can then be manipulated and put back into the canvas. Every image in a canvas, and in fact this is true of all canvas content, is composed of four-byte-wide pixels.

So let's imagine we had a picture like this on the canvas and we looked at an individual row. So that individual row would be made up of pixels, starting at the left-hand side over here and continuing all the way over to here. Imagine each pixel is a little box going across the row. Well, each one of these pixels is made up of a four-byte combination. There's a red, green, and blue component of that pixel along with the alpha setting. So by getting access directly to these bytes, we can manipulate how the image looks in the canvas.

So if we were to c...

Manipulating raw pixels
Video duration: 9m 10s 3h 7m Intermediate

Viewers:

Manipulating raw pixels provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...