5.9 Compositing 151Figure 5.31 Compositing operation “destination-in” with image and text
The light gray text is again written with the default compositing method source-
over and therefore not affected by the effect. Currently, it is not possible to define
several texts as cutout at the same time because of the already mentioned short-
fall in browser implementation.
Our second example uses the method lighter, expanding the previously men-
tioned options for color manipulation in images. With lighter, Figure 5.32 com-
bines the Yosemite picture with 16 rectangles in the named standard colors,
offering a CPU-friendly alternative to the color filter monoColor() mentioned in
section 5.8.2, Color Manipulation with “getImageData()”, “createImageData()”,
and “putImageData()”. So we could implement the example used in that section
differently and achieve a similar result:
context.drawImage(img,0,0,210,140);
context.globalCompositeOperation = 'lighter';
context.fillStyle = 'blue';
context.fillRect(0,0,210,140);