HTML5 Canvas Cookbook

Converting image colors to grayscale

In this recipe, we'll explore another common pixel manipulation algorithm, converting colors to grayscale.

Note

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

Follow these steps to convert the colors of an image to grayscale:

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 object and set the onload property to a function that draws the image and gets the image data:

    var imageObj = new Image(); imageObj.onload = function(){ var ...