HTML and CSS Reference
In-Depth Information
cContext.fillStyle = "blue";
cContext.beginPath();
cContext.arc(65, 75, 40, 0, (Math.PI * 2), true);
cContext.fill();
}
</script>
5.
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.
6.
Change the debugging browser to use Chrome as this supports all of the
compositing options (as well as the multi-column support).
7.
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
clipping shape.
•
