Change color of a picture in Canvas

If you created a simple picture and you want to change it's color on the fly on your web-page. You can do this with canvas, at least for modern browsers. This article is about how you can do it and prevent that your site looks ugly if canvas is not supported.

You can check for canvas support with a JavaScript function:

var canvasSuported = function () { 
     var elem = document.createElement('canvas'); 
     return !!(elem.getContext && elem.getContext('2d')); 
};

Have you seen the double exclamation sign (double-bang). It is there for always producing a boolean value, simply returning (elem.getContext && elem.getContext('2d') doesn't always return a boolean value. For more on this see http://stackoverflow.com/questions/4686583/can-someone-explain-this-double-negative-trick

For always displaying a picture, you can put html5 similar to the following html5 code into your page:

<canvas id="myCanvas" width="250" height="300" class="floatLeft">
	<img id="billyExample" class="floatLeft" src="picture/BillyBoTheHTMLBlob.png" title="Billy Bo the HTML Blob" alt="Billy Bo the HTML Blob" />
</canvas>

Back to the JavaScript how to get a picture in the canvas and change it's color and saturation:

(function () {
    "use strict";
     var ctx,
         canvas,
         
      .....             
      
      .....
      	
     drawPicture = function () {  
         var gba = $("#color").spectrum("get").toRgb(), //no hassle color picker toRGB returns a object { r, g, b, a } ie. red, green , blue alpha
             i,
             img = document.getElementById("billy"), //this is the fine piece of post-modern art from the header of this page 
             imgd, 
             n;
             pix, 
         
         ctx.drawImage(img, 0, 0); 
         imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
         pix  = imgd.data;
         n    = pix.length;

         for (i = 0; i < n; i += 4) { 
             if (pix[i + 3] > 0) { 
                 pix[i    ] = rgba.r;       // red   - values 0 to 255
                 pix[i + 1] = rgba.g;       // green - values between 0 and 255
                 pix[i + 2] = rgba.b;       // blue  - values between 0 and 255
                 pix[i + 3] = rgba.a * 255; // alpha in canvas from 0 to 255, instead between 0 and 1. 
             } 
         } 
         ctx.putImageData(imgd, 0, 0);
     },
      
      .....             
      
      .....
      
   setCanvasOrPic = function () {
		if (canvasSuported()) {                            //see funtion at the top of the page 
			canvas = document.getElementById("myCanvas");
			ctx = canvas.getContext('2d');
			drawPicture();
		} 
	};
	
	initialize = function () {
		setCanvasOrPic();
	};
	addHandler(window, "load", initialize); // addHandler browser independent version of addEventListener for code see *
}());

* click here for code addHandler

var addHandler = function (element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    }
};

For more on working in canvas with picture see https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images?redirectlocale=en-US&redirectslug=Canvas_tutorial%2FUsing_images and http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation.

You can see the instruction video at youtube by clicking on this text here. To see how it works: Play around!

Background Color:

Color:

Billy Bo Bob the HTML Blob.

An HTML, CSS and JavaScript Odyssey.

Produced CSS code: