HTML and CSS Reference
In-Depth Information
Color Transformation
When a character is damaged in a game, you might want to make the character red as an effect. You can achieve this
with pixel-by-pixel processing using get/putImageData, which I showed earlier in the “Bitmap API Example” section,
but it takes a lot time. So you need a faster way to transform color.
The solution is the
globalCompositeOperation
property. This property is useful to filter images. You can specify
how to draw shapes over existing images by using this property. You can see the effect of each of the operators in
Listing 16-10.
Listing 16-10.
Global Composite Operations
onload = function() {
var operations = ["source-over", "source-atop", "source-in", "source-out",
"destination-over", "destination-atop", "destination-in", "destination-out",
"lighter", "copy", "xor", "darker"];
for(var i = 0; i < operations.length; i++) {
var div = document.createElement("div");
div.innerHTML = ":" + operations[i];
document.body.appendChild(div);
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 75;
div.insertBefore(canvas, div.firstChild);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#03f";
ctx.fillRect(5, 5, 50, 50);
ctx.beginPath();
ctx.fillStyle = "#f50";
ctx.arc(45, 45, 25, 0, Math.PI * 2, false);
ctx.globalCompositeOperation = operations[i];
ctx.fill();
ctx.globalCompositeOperation = "source-over";
ctx.strokeRect(0, 0, 75, 75);
}
};
Figure
16-9
shows the results of using the
globalCompositeOperation
property.
