HTML5 Canvas Breakout GameThis tutorial shows you how to use HTML5 canvas to create a classic breakout or brickbreaker game (you know, the one where you use the ball to destroy the bricks at the top of the screen). This snippet originally appeared on CodePen.
HTML5 Canvas Triangle PatternThis code snippet demonstrates how to create a cool pattern of repeating triangles using HTML5 canvas. The triangle pattern has many different color themes, and one will be randomly selected on each load. This snippet originally appeared on CodePen.
HTML5 Canvas Drawing EffectsThis tutorial shows you how to use canvas to create over a dozen different types of drawing effects. The snippet gives you an option to choose what type of brush you'd like to draw with (choose from one of sixteen different and colorful options!), and it also allows you to clear the canvas as well. It almost mimics the paintbrush or airbrush effects on popular image editing software like Photoshop. Adapted from a CodePen tutorial.
HTML5 Canvas SpinnerCheck out this canvas code snippet, which demonstrates how to make a simple spinner (perfect for page loads) using HTML5 canvas.
HTML5 Canvas Animated Gradient BackgroundThis canvas tutorial shows you how to use canvas to play with color through animated gradients. This snippet originally appeared on CodePen, and would make a great addition to any project.
HTML5 Canvas Colorful Circles EffectCanvas can be used to create so many different types of animated effects. This tutorial shows you how to create a canvas full of circles that have changing colors and sizes. The circles cycle through different sizes and colors on their own, but they also respond to stimulus from the cursor. Adapted from a CodePen tutorial.
HTML5 Canvas Constellation EffectWe 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.
HTML5 Canvas Snake GameOne thing that HTML5 canvas is great for is creating fun and interactive games. Take a look at this code snippet (originally from codepen), that demonstrates how to use canvas to make an old-school game of snake. Take note of how the code for canvas games requires a lot more HTML and CSS than our code snippets normally do.
HTML5 Canvas Animated Solar SystemThis canvas tutorial adapted from this free snippet shows you how to make an animated model of the solar system using the HTML5 canvas. The code creates an image of the sun, with all of the other planets of the solar system revolving around it. Great to use for educational purposes or just for fun.
HTML5 Canvas Bouncing BallsThis snippet shows you how to create a simple bouncing balls effect using HTML5 canvas.