Understanding pixel manipulation

Now that you have mastered drawing in canvas, it's time for us to turn to a new aspect of working with canvas. In canvas, you can manipulate pixels. It's not only a vector drawing tool, but a very smart pixel editor (raster).

Getting ready

Now that we are about to start reading data that is present on the canvas, we need to understand how security works when it comes to pixels. In an effort to protect content that isn't yours, there are security issues involved in working with data that isn't hosted on the same host as yours. We will not cover these security issues in this section and will be always working with images in the same domain as our code (or all locally).

Your first step is to find an image that you wish to work with (I've added an old image of my own into the source files). In this sample, we will recreate a pixel fade-out animation—really cool and useful for slides.

How to do it...

Let's get our code working and then break it down to see how it works...