Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Constellation Effect


We already know how to use canvas to create a dark night sky of glittering stars, so now let's take it up a notch and use the HTML5 canvas feature to create an interactive constellation. This snippet creates a beautiful starry sky that responds to up/down arrows and scrolling. When you scroll or use a vertical arrow key, the stars in the canvas will join together to create a beautiful constellation. Reverse your scroll to see the stars return to their original positions. This snippet is adapted from a CodePen tutorial.