It is, quite literally, a digital “canvas” that you can use for rendering game graphics, graphs, animations, and other visual images on the fly. This basically eliminates the need for other types of online animation and graphics rendering (like Flash), and is much more compatible across platforms and devices.
Hopefully you already knew all of that. While the basic idea behind Canvas is simple, actually working with it can be a bit more complex. So here are some great resources to get you started!
If you’re completely new to canvas, you might want to start out with one of these handy guides. There are hundreds of tutorials and guides out there, but these three provide virtually everything a beginner would want to know about canvas before getting started.
Dive Into HTML5
Dive Into HTML5 has a fantastic chapter on working with canvas that includes a basic definition, and information on building simple shapes, canvas coordinates, paths, text, and more.
Mozilla Developer Network
The Mozilla Developer Network has a very thorough guide to canvas that includes the basics, drawing shapes, using images, applying styles and colors, transformations, compositing, and more.
HTML5 Canvas Tutorials
HTML5 Canvas Tutorials has exactly what the title suggests: tons of tutorials for using canvas that cover everything from paths and curves to images, text, and more.
Tools, frameworks, and libraries
Canvas can be used for a whole host of different purposes, but apps and games are the most common. Games, in particular, are a hugely popular use of canvas, with tons of game engines available.
Regardless of what you want to do with canvas, the tools and other resources below will help get you started.
The free plan supports up to 20 public projects, while paid plans give you more projects and other features, starting at just $6/month.
Mixeek is entirely free to use.
Radi lets you create video, animation, and realtime graphics without learning to code. It works with both the canvas and video tags, and supports many kinds of content layers including images, movies, shapes, text, and more. And of course it supports interactive elements. You can download the Radi beta for free.
PlayCanvas is an easy to use WebGL game engine that’s free and open source. It includes a physics engine (with support for rigid bodies, triggers, vehicles, and joints), graphics engine (with support for per-pixel lighting, shadows, and post effects), and more. PlayCanvas also includes collaborative development tools, and even includes free hosting for your games.
Construct 2 is a gaming engine designed specifically for 2d games. It’s great for everyone from the casual hobbyist to the professional developer who wants to create faster prototypes and mockups, or even save time on coding for production. It includes support for flexible behaviors, instant previews, a powerful event system, and easy extensibility. And of course, your games can be exported to a variety of platforms. You can download a free version with limited functionality (perfect for trying it out), or purchase a license starting at less than $130.
Turbulenz is an HTML5 gaming engine that you can use to create, test, and even monetize games. Turbulenz consists of two parts: the engine and the SDK. The engine supports rendering effects and particles, a physics engine (including collision and animation support), scene and resource management, and more. The SDK includes samples, documentation, a viewer, asset processing tools, and packaging and deployment resources.
MelonJS integrates the Tiled map format to make designing levels faster and more streamlined. It was designed as a simple, free, standalone library for developing 2D games that are compatible with all the major browsers. It uses a polygon-based collision algorithm and broad-phase collision detection using spacial partitioning. It also includes tween and transition effects, and basic particle and animation systems.
Quintus is an easy-to-use cross-platform game engine that lets you create games with a lot less code. The example game on their site uses right around 80 lines of code to create a platformer-style game that’s pretty amazing. Quintus is fully documented and has a community to help you out if you need support.
Crafty lets you render with either canvas or DOM. It uses an entity component system for game development, avoiding long chains of inheritance. It also includes tons of native components for animation, effects, sound, inputs and more. It has advanced SAT collision detection, it’s cross-browser compatible, and it supports sprite maps for easier drawing of game entities.
LimeJS is an HTML5 game framework for building native-like games for modern devices. It’s well-documented, with a community for further support. It includes functions for layouts, nodes, shapes and fills, events, animations, and more.
bHive is a canvas framework that makes it easy to create rich animations, games, applications, and user experiences. It includes support for drawing, animation, and interaction, with demos and examples as well as documentation.
Paper.js is a vector graphics scripting framework that runs on top of canvas. It has powerful features for working with vector graphics and bezier curves, all wrapped up in a consistent, clean programming interface. It’s largely compatible with and based on Scriptographer (a scripting environment for Adobe Illustrator). It’s easy to learn if you’re a beginner while also having plenty of features for more advanced users.
Voxel.js is an open source 3D game building toolkit. It makes it easier to create voxel games like Minecraft in the browser. It’s split into multiple components, so you can use just what you need instead of a huge, bloated game framework.
Isogenic Game Engine
The Isogenic Game Engine is an advanced HTML5 multiplayer game engine that’s used by a number of big names, including the BBC. It includes 2D and isometric support, with particle emitters, tweening, and cell-based animation. And unlike other “multiplayer” game engines that just throw in a networking library, Isogenic has a more advanced and realtime multiplayer functionality than in any other HTML5 game engine out there.
Wade Game Engine
The Wade Game Engine makes it easy to create games for desktop and mobile devices, and is built to perform well on either. Wade has a modular architecture so you can quickly create whatever type of game you need. It has a base module for flexibility, a physics module for games that need them, an isometric model for RPG and strategy games, and more.
LycheeJS is a HTML5 and native OpenGL game engine for embedded, console, mobile, server, and desktop games. It supports responsive layouts, and includes an effect and tween engine, Verlet physics engine, a particle engine, a sprite animation engine, a bitmap font engine, and much more. It also includes websockets technology for multiplayer games.
Regardless of what your plans with canvas are, the resources here should set you on your path. Building games, applications, and otherwise adding animation or interactivity to your sites is made a lot easier with canvas libraries, frameworks, and game engines.