Drone Age Sprite Colorization via Canvas source-atop GCO

by juErik

HTML

<script src="http://dl.dropbox.com/u/2645586/gco/color-picker/jquery.ps-color-picker.min.js"></script>

<div id="output">
  <canvas id="primary-output" width="120" height="120"></canvas>
  <canvas id="secondary-output" width="120" height="120"></canvas>
  <canvas id="merged-output" width="120" height="120"></canvas>
</div>
<div id="buttons">
  <button id="color-primary">Primary</button>
  <button id="color-secondary">Secondary</button>
</div>

CSS

#subsprites {
    background: url(http://dl.dropbox.com/u/2645586/gco/checker.png);
    overflow: auto;
}
#subsprites img {
    display: block; float: left;
}
#buttons { clear: left; }
button {
    background: #aaa; border: 1px solid #000; width: 120px; height: 30px; float: left; margin: 0; padding: 0;
}
#output {
    background: url(http://dl.dropbox.com/u/2645586/gco/starfield-navy.jpg);
    clear: left; overflow: auto;
}
#output canvas {
    float: left;
}

JavaScript

var rgbPrimary = "rgba(80,80,0,0.5)";
var rgbSecondary = "rgba(24,128,128,0.5)";


$("#color-primary").CanvasColorPicker({
    color: {r:80,g:80,b:0},
    onColorChange: function(rgb) { 
        rgbPrimary = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",0.5)"; 
        colorizeSprites();
    }
});

$("#color-secondary").CanvasColorPicker({
    color: {r:24,g:128,b:128},
    onColorChange: function(rgb) { 
        rgbSecondary = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",0.5)"; 
        colorizeSprites();
    }
});

colorizeSprites();