Drone Age Sprite Colorization via Canvas source-atop GCO (Single)

by gbarnett

HTML

<script src="http://dl.dropbox.com/u/2645586/gco/color-picker/jquery.ps-color-picker.min.js"></script>
<img id="sprite" src="http://dl.dropbox.com/u/2645586/gco/cobra-desaturated.png" />

<canvas id="output" width="120" height="120"></canvas>

<button id="color">Color</button>

CSS

#sprite {
    background: url(http://dl.dropbox.com/u/2645586/gco/checker.png);
    overflow: auto;
    display: block;
}

#color {
    background: #F00; border: 1px solid #000; width: 120px; height: 30px; margin: 0; padding: 0; display: block;
}
#output {
    background: url(http://dl.dropbox.com/u/2645586/gco/starfield-navy.jpg);
}

JavaScript

var primaryRgb = "rgba(255,0,0,0.5)";

var colorizeSprite = function() {
    var imgSprite = document.getElementById("sprite");

    var canvas = document.getElementById('output');
    
    var ctx = canvas.getContext('2d');
    ctx.drawImage(imgSprite,0,0);
    ctx.globalCompositeOperation = "source-atop";
    ctx.fillStyle = primaryRgb;
    ctx.fillRect(0,0,canvas.width,canvas.height);
    
};

$("#color").CanvasColorPicker({
    height: 120,
    color: {r:255,g:0,b:0},
    onColorChange: function(rgb) { 
        primaryRgb = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",0.5)"; 
        colorizeSprite();
    }
});

colorizeSprite();