When I was drawing my field of flowers, I also wanted my clouds to be translucent. That way, when a cloud passed in front of the sun, the sun would shine through a little bit. My initial thought was to set the alpha value of the fill color for my rectangle and circles to 0.9. But that looked awful—you can see where the rectangle and circles overlap.
Cloud fill color: alpha:
So, I decided that an opaque white cloud that blocked out the sun was “good enough”—until another thought popped into my head weeks later when I was thinking about using the composite mode of the context to draw the intersection of two shapes. When we draw a shape on <canvas>, we are changing the color of individual pixels. The <canvas> doesn’t remember the shape we drew; it just knows that pixel 1 is now white and pixel 2 is now black.
To draw a translucent cloud above my field of flowers, I use a second <canvas>. I start by drawing an opaque cloud on the second <canvas>. Then, I lower the globalAlpha of the first <canvas> to 0.9 and copy the pixels from the second <canvas> onto it. Once I lower the globalAlpha of the first <canvas> to 0.9, any opaque pixels that I draw onto it will be uniformly translucent.
Context of the first <canvas>: globalAlpha:
(First <canvas>)
(Second <canvas>)
Drawing onto a second <canvas> and then copying those pixels onto the first <canvas> is a strategy that I use frequently. It’s surprising how many cool effects we can achieve. If we tell the browser not to display the second <canvas>, we can still draw onto it, but the viewer won’t see it and it won’t take up any space on the page.