I just started to play with the canvas element over the weekend. I started with trying to recreate my logo. You’ll need a modern browser to see this…
Not bad, right? I’ll probably change it so the fill is more flexible or something. I ran into issues with the negative space because clearing it out will clear anything underneath. But if you notice above, the squares are still intact. I was able to achieve this by drawing my logo in a separate canvas element and then drawing the contents in the canvas above. Credits to this post on Stack Overflow for helping me solve this issue. The negative space is done by filling in the outer shape, then changing globalCompositeOperation to ‘destination-out’.
If you’d like to see the source for drawing the logo, you can find it here.
The main resource I used was Mozilla’s Canvas Tutorial.