Home » Tutorials » Game Development » HTML5 Canvas For Absolute Beginners – Part 6

HTML5 Canvas For Absolute Beginners – Part 6

HTML5 Canvas For Absolute Beginners – Part 6

Welcome to the last part of the ‘HTML5 Canvas for Absolute Beginners’. In this article, we are going to show you some of the useful framework of HTML5 canvas. If you haven’t already, be sure to read the previous articles of this series first!

Why Use Framework?

Since you had go through the previous tutorial in this series, we assume that you can draw a circle, triangle, rectangle now by using your own JavaScript. This may sounds great when you are just drawing some simple shapes, but how about more complicated shapes and animation? The best way to get your things done is using framework instead of writing your own code. You should use framework for several reasons:

  • Do more with less code.
  • Save time.
  • Save cost.
  • Unified browser API.

Ok, let’s see what are the frameworks available for web professionals to create images, animation and interaction. 🙂


Xc.js is a JavaScript framework for developing 2D game on HTML5 canvas. With the concept of ‘scenes’, ‘nodes’, ‘actions’, ‘events’, it’s really simple and easy to use, in addition, you just need to write once and run it on any platforms such as desktop and iPhone that with modern web browsers installed. So, how about Android? No worries, the development team of xc.js is going to porting to Android and other platforms very soon.

Pros: Easy to use, good documentation, tutorials and examples are provided.


Source: http://www.getxc.org/


Jcotton is a JavaScript framework for illustrator or animator to create illustration or animation on HTML5 canvas. It’s also a great framework for game makers to create web game too.

It contains a simple interface that allows properties and animations to be chained each together. With the help of framework, you can create simple shapes such as squares and rectangles with or without rounded corner, and even more complex shapes are possible. The framework is compatible on several browsers such as Firefox 3, Chrome 5, Safari 4, Opera 10 and Mobile Safari.

Pros: Easy to use and good documentation, tutorials, examples are provided.
Cons: Not working on IE.


Source: http://jcotton.sourceforge.net


Processing.js is an open source framework developed by Ben Fry and Casey Reas that based on Java for web professionals to create images, animation, and interactions without any 3rd party pulgins. Web professionals just need to write the code by using Processing language, then Processing.js will does the rest of the thing for you by running properly on any HTML5 compatible browsers uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Pros: Light weight, one of the popular framework with huge tutorials, examples provided.


Source: http://processingjs.org/


Paper.js is another JavaScript framework that similar to other frameworks as well. With paper.js, web professionals create path and add segments to its very easily. Besides, paper.js also offers mouse and keyboard handlers for the different actions you can perform with a mouse or even on touch screen!

Pros: Very good documentations and various features such as object conversion, mouse, keyboard handlers, vector geometry and etc.
Cons: Beginners may need to spend more time to master the framework.


Source: http://paperjs.org

Last But Not Least

Recently, Adobe has just release a preview version of a product called ‘Adobe Edge’, it is a HTML5 web animation authoring tool that allow web designers to create animated web content by using modern web technologies like HTML5, JavaScript and CSS3. You can read more from our previous article or visiting the official website of the product.

Do you have any recommendation of framework for HTML5 Canvas? Share it on the comment section!

  • paniz

    How about Raphael Framework?

  • nmimagine

    Processing.js created by John Resig. Ben Fry and Casey Reas created the Processing framework which written in Java. Processing.js ported from Processing framework……….

  • Sahar

    This is getting old by now, maybe if you update this tutorial by adding EaselJs, KineticJS, etc. 🙂

  • Noman Yaqoob

    which framework best suit for animating two shapes or more by connecting them together with any line or arrow???

    • There are quite many Canvas frameworks available in market today, such as Paper.js Library, bHive.js Library, Fabric.js Library and etc. You could try and research them. 🙂

Android, iOS Development Tutorials