As well as the RGB "channels" there is a fourth one, often called the alpha channel and denoted A. It controls the opaqueness of each pixel. It is a single byte and so has a range from 0 meaning completely transparent to 255 meaning fully opaque.
It can be used in Javascript by setting another property of the graphics context, globalAlpha but the values range from 0.0 to 1.0. If you set a value less than 1 for drawing a shape remember to set it back to 1 afterwards.
An alpha property could be added to some shapes. Then in our draw() function add something like
if (DATA.shapes[i].alpha) g2.globalAlpha = DATA.shapes[i].alpha;
else g2.globalAlpha = 1.0;
That is testing for the existence of an alpha, so the alpha property does not need to be written for every shape definition.
This suggests another exercise: put a pane of glass in front of part of the scene from exercise 9. Alpha could be about 0.2 or even less.