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

Figure 16-10 shows the meaning of FA and FB.
Figure 16-10. Formula of global composite operations
Color Transformation Using Alpha
The easiest method of color transformation is to use alpha transparency. This method is not only easy but very fast,
so you can use this aggressively.
The code in Listing 16-11 draws a transparent image with color transformation using the "source-atop"
operator.Browsers avoid drawing the transparent pixels, and draw an alpha-blended green color on existing pixels.
As a result, the image shows a green face (Figure 16-11 ). You can use this effect for damaging effects in your game.
Listing 16-11. Color Transform with Alpha
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 " ;
};