HTML and CSS Reference
cContext.fillStyle = "blue";
cContext.arc(65, 75, 40, 0, (Math.PI * 2), true);
This code uses a for loop to process all 12 canvas elements. It gets the
corresponding element and then obtains its drawing context. It adds a red square
and then sets the globalCompositeOperation property. Finally, it adds a blue circle.
Change the debugging browser to use Chrome as this supports all of the
compositing options (as well as the multi-column support).
save your changes and press F5 to start the application. The web page should look
like Figure 10-15 .
Figure 10-15. Demonstrating the compositing options
The compositing options are:
source-over - This is the default operation. The source element (the element being
added) is drawn on top of the destination (whatever is already in this location).
destination-over - This is the opposite of source-over, where the source element is
added underneath the existing elements.
source-in - Only the portion of the source object that is also in a destination element is
displayed. Note that none of the destination element is displayed; it is being used like a