Creating a Canvas Overlay

Check out the example above on GitHub pages.

The HTML canvas element is great for creating games in JavaScript, but it can also be used to add a little bit of flare to a regular old website.

For example, I recently added a canvas overlay to Basketbalrog that adds a tiny interactive basketball to the screen while still allowing a user to click on the links underneath the canvas and use the website as expected.

To make this happen, I configured a few CSS rules on the canvas:

#canvas {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

1. First, I made the canvas' position absolute so it exists outside of the normal document flow.
2. Next, I set the canvas' z-index to 2 so it's "on top" of the DOM.
3. Finally, I set the pointer-events style to "none" so the canvas doesn't block the DOM from handling pointer events (e.g. click, hover, etc.)

You can see what this ends up looking like here.

The rest of the code is plain old JavaScript interacting with the canvas element. I put a copy of the code here on GitHub in case that’s handy.