Canvas - HTML5 - page 192

Further, you can ensure that a pixel you have drawn on the canvas element retains
partial transparency by manipulating the alpha channel of the color used to draw the
pixel. Partial transparency means that what the user sees for each pixel is the combi-
nation of the color at that location below the canvas element and the color shown for
that pixel in the canvas element.
For example, if we were to make the red circle from the previous example partially
transparent, it would appear as shown in Figure 9-3 .
Figure 9-3. The red circle with partial transparency, showing text from underneath
The partially transparent color is useful not only for content that appears on the page
beneath the canvas element, but also for content that has already been drawn onto the
canvas element itself:
mycontext.beginPath();
mycontext.arc(40, 40, 25, 0, Math.PI * 2, true); // draw a circle
mycontext.closePath();
mycontext.fillStyle = "#f00";
mycontext.fill(); // fill the circle solid
mycontext.beginPath();
mycontext.arc(70, 40, 25, 0, Math.PI * 2, true); // draw a circle
mycontext.closePath();
mycontext.fillStyle = "rgba(0,0,255,0.75)";
mycontext.fill(); // fill the circle solid;