HTML5 Canvas Cookbook

Introduction to pixel manipulation: inverting image colors

Now that we know how to access image data, including the RGBA for every pixel in an image or video, our next step is to explore the possibilities of pixel manipulation. In this recipe, we'll invert the colors of an image by inverting the color of each pixel.

Note

WARNING: This recipe must be run on a web server due to security constraints with the getImageData() method.

Follow these steps to invert the colors of an image:

How to do it...

1. Define the canvas context:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");

2. Create an image ...