5.9 Compositing 1495.9 Compositing
The possibilities of compositing in Canvas are many and varied, but you will
only find a few good examples of their use on the Internet. Most are limited to
presenting the methods per se, and to start with, that’s what we will do, too. Fig-
ure 5.30 shows valid keywords of the globalCompositeOperation attribute, their
Porter-Duff equivalent (in italics, with A,B), and the result after drawing.
First, we draw the blue rectangle as background, then we set the desired com-
posite method, and finally we add the red circle. So for the first method, source-
over, which is also the default value of the globalCompositeOperation attribute,
the code looks like this:
context.beginPath();
context.fillStyle = 'cornflowerblue';
context.fillRect(0,0,50,50);
context.globalCompositeOperation = 'source-over';
context.arc(50,50,30,0,2*Math.PI,0);
context.fillStyle = 'crimson';
context.fill();
The image looks like that shown in Figure 5.30.
Figure 5.30 Values of the “globalCompositeOperation” attribute