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();
<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>
#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); }