Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

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.