Source-atop CANVAS

allows you to colorize drawn images

by fezec

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
canvas.imageSmoothingEnabled=true;
var context = canvas.getContext("2d");
var img = new Image();
var spot = new Image();

function draw() {

    context.save();
    context.drawImage(img, 0, 0);

    context.globalCompositeOperation = "source-atop";
    context.fillStyle = "rgba(200,0,0,.5)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    context.restore();
   
    context.drawImage(spot, 0, 0);
    context.globalCompositeOperation = "source-atop";
    context.fillStyle = "rgba(0,0,200,.5)";
    context.fillRect(0, 0, canvas.width, canvas.height);
   
  

}

img.onload = count;
img.src = "http://dl.dropbox.com/u/2645586/gco/cobra-desaturated.png";



spot.onload = count;
spot.src = "http://ileavebehind.com/26_UnderstandingDifferencesinHardwareAccelerationthroughPaintball_3.png"

var index = 0;

function count() {
    index++;
 
    if (index=== 2) {
        draw();
    }
}