Good Resources For Succeeding With Html5 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Mixeek is entirely free to use.
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.
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.
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.
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.