25+ resources for succeeding with HTML5 canvas

In case you’ve been living under a rock for the past couple years, the canvas element in the HTML5 specification is fairly simple to understand. Basically, it’s a rectangular area in your page where you can use JavaScript for drawing anything you choose.

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!

Learning canvas

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.

Animatron

Animatron is a premium tool for creating HTML5 animations with no coding required. It has a streamlined UI, supports self-hosted projects (so you can download the HTML5, JavaScript, and resource files for total control), has real-time collaboration tools, and supports both public and private projects.

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

Mixeek is an animation tool that’s based purely on CSS3, HTML5, and JavaScript. It has an online design tool that’s easy to use and very intuitive. And the animations it creates are supported on IE, Firefox, Chrome, Opera, and Safari, as well as mobile browsers.

Mixeek is entirely free to use.

Radi

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

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

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.

EaselJS

EaselJS is a JavaScript library that makes it easier to work with the canvas element. Its API is familiar to Flash developers, but with JavaScript sensibilities. It includes object nesting, a mouse interaction model, and more. There are demos to get you started on everything from drag and drop to sprite sheets to filters and vector masks.

Phaser

Phaser is a fast and free open source framework that supports JavaScript and TypeScript. It uses WebGL and canvas, and has support for animation, particles, cameras, device scaling, tilemaps, and more.

Three.js

Three.js is a JavaScript library that makes it easy to work with WebGL much easier. It simplifies your code significantly, and is very thoroughly documented. There are tons of great examples of how it’s used in practice, including on sites like that for The Hobbit films and more.

Turbulenz

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

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

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

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

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.

KineticJS

KineticJS is a high performance framework for building animations, transitions, node nesting, layering, filtering, event handling, and more with HTML5 canvas and JavaScript for mobile and desktop apps. It’s well-documented and there are tons of examples already available.

bHive

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

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.

Fabric.js

Fabric.js is a simple but powerful JavaScript HTML5 canvas library that provides an interactive object model on top of the canvas element. It even includes an SVG-to-canvas (and vice versa) parser. You can create and populate objects on canvas, including images, complex shapes, text, and more.

Voxel.js

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.

Game{Closure} DevKit

The Game{Closure} DevKit makes it easier and faster to build games, with native speed. It’s 100% JavaScript, with battle-tested code that’s been deployed worldwide. It can be used with your current favorite text editor and browser, without the need for other specialized tools or downloads. And since it uses OpenGL for mobile games, they have native speed on Android and iOS.

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.

Enchant.js

Enchant.js is a simple framework for building games and apps with HTML5 and JavaScript. It’s been used on over 1,000 games and apps already, and has extensive supporting documents. It’s object oriented, multi-platform, and event-driven, complete with an animation engine, WebGL support, a content library, and more.

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

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.

Heatmap.js

Heatmap.js is a simple library for creating JavaScript heatmaps using HTML5 canvas. It’s the most advanced heatmap visualization library on the web, with a very lightweight footprint (less than 3kB gzip), and has premium support available.

Chart.js

Chart.js lets you create simple, clean, engaging charts using canvas and JavaScript. There are six chart types available, it’s dependency free, responsive, modular, and interactive.

Conclusion

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.

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.