Mobile Web Game Techniques with Canvas 2D API - HTML5 Game Development Insights - page 249

Figure 16-11. Color transform with alpha output
Separate RGB Channels
If you want to adjust color transformations in detail, you can separate and merge RGB channels using
globalCompositeOperation operators. This is effective for game engines.
The code in Listing 16-12 separates each channel using the darker operator (Figure 16-12 ). You can modify each
image precisely with alpha-blending. After finishing modifications, the code merges all channels using the lighter
operator. As I said, darker is a non-standard operator but almost all mobile browsers support it.
Listing 16-12. Separate RGB Channels
onload = function() {
var img = document.createElement("img");
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "rgba(0, 255, 0, 0.6)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = " http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png " ;
};