Canvas objects are not transparent to underlying HTML/CSS objects

Instead of using a transparent background you need to use the clear() function. The issue is that your transparent background basically doesn’t do anything and leaves the shapes you’ve drawn in previous frames as is, so by repeatedly drawing the shapes, even with low opacity, they become more and more opaque very quickly. If you change the frame rate to 1 (i.e. frameRate(1) in setup), you will see what is happening clearly.

2 Likes