Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial
HTML5 has brought some exciting new advantages to the HTML coding world. Canvas allows you to render graphics powered by Javascript. So throw away that flash code and dive into Canvas. Here you will find the best tutorials and resources to learn Canvas and other HTML5 aspects.

  • HTML5 Canvas Animated Gradient Background
    This 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 Effect
    Canvas 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 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.

  • HTML5 Canvas Snake Game
    One 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 System
    This 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 Balls
    This snippet shows you how to create a simple bouncing balls effect using HTML5 canvas.

  • HTML5 Canvas Floating Hearts
    This canvas tutorial demonstrates how to use your canvas to make colorful floating hearts. Another love themed canvas just in time for Valentine's Day! This canvas has many hearts that float on their own when the page first loads, and will also release new hearts when the user clicks on the canvas. Adapted from a CodePen snippet.

  • HTML5 Canvas Animated Heart
    Just in time for Valentine's Day -- check out this tutorial, adapted from CodePen, which creates a beautiful, intricate animated heart using only HTML5 canvas.

  • HTML5 Canvas Rotating Switching Crosses
    This is a unique HTML5 canvas effect that creates the illusion of rotating crosses.

  • HTML5 Canvas Circular Loading Animation
    Create a circular loading animation using your HTML5 canvas. The original code for this loading animation can be found here.