HTML and CSS Reference
In-Depth Information
<div>
<canvas id = "composting12" width = "120" height = "120"></canvas>
<br />darker
</div>
<!-- < canvas id = "board" width = "600" height = "600">
Not supported
</canvas>
<canvas id = "solarSystem" width = "450" height = "400">
Not supported
</canvas>−->
</div>
2.
Add the following
style
element in the
head
section. This will format the
canvas
elements into three columns so you can see all 12 examples on one screen.
<style>
body div
{
-webkit-column-count: 3;
column-count: 3;
}
</style>
3.
Collapse the solar system
script
element.
4.
Add the
script
element shown in Listing 10-11 to the
body
element, just after the
existing
script
elements.
Listing 10-11.
Drawing the compositing canvases
<script id = "compositing" type = "text/javascript">
for (var i = 1; i < = 12; i++) {
var c = document.getElementById("composting"+i);
var cContext = c.getContext("2d");
cContext.fillStyle = "red";
cContext.fillRect(10, 20, 80, 80);
switch (i) {
case 1: cContext.globalCompositeOperation = "source-over"; break;
case 2: cContext.globalCompositeOperation = "destination-over"; break;
case 3: cContext.globalCompositeOperation = "source-in"; break;
case 4: cContext.globalCompositeOperation = "destination-in"; break;
case 5: cContext.globalCompositeOperation = "source-out"; break;
case 6: cContext.globalCompositeOperation = "destination-out"; break;
case 7: cContext.globalCompositeOperation = "source-atop"; break;
case 8: cContext.globalCompositeOperation = "destination-atop"; break;
case 9: cContext.globalCompositeOperation = "xor"; break;
case 10: cContext.globalCompositeOperation = "copy"; break;
case 11: cContext.globalCompositeOperation = "lighter"; break;
case 12: cContext.globalCompositeOperation = "darker"; break;
}
