My Favorite 5 JavaScript Canvas Libraries – HTML5

Last updated
App Shah
Crunchify » JavaScript and jQuery Tutorials » My Favorite 5 JavaScript Canvas Libraries – HTML5
html5-canvas

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Here is a sample HTML canvas example:

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="290" height="80" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
 
<script>
 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Georgia";
ctx.strokeText("crunchify.com Test",10,50);
 
</script>
 
</body>
</html>

Output:

crunchify.com Test

My Favorite JavaScript Canvas Libraries:

1) bHive.js Library:

Create rich user experiences, animations, games and applications with bHive, a HTML 5 canvas framework API built to make developing easier, so you can start creating straight away.

bHive javascript library

Link: http://www.bhivecanvas.com/

2) BitmapDataChannels Library:

HTML5 Canvas API implementation of the AS3 BitmapData class.

BitmapDataChannels javascript library

Link: https://github.com/pnitsch/BitmapData.js

3) Paper.js Library:

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

paper.js javascript library

Link: http://paperjs.org/

4) HTML Canvas Library:

HTML canvas library is a full-featured lightweight wrapper library of the native html canvas element written in Javascript, aimed to make visualization and animation using canvas simpler. Features animation support, layers, event capture, multitouch and many examples.

HTML Canvas javascript library

Link: http://html-canvas-lib.sourceforge.net/

5) Fabric.js Library:

Fabric.js is a powerful and simple Javascript canvas library. Fabric provides interactive object model on top of canvas element. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.

Febric.js javascript library

Link: http://fabricjs.com/

Which one is your favorite one? Let us know in comment section below.

24 thoughts on “My Favorite 5 JavaScript Canvas Libraries – HTML5”

  1. I am looking to learn JS and its abilities with canvas. I have my idea for a project what I want to know is what is best to use / learn if I want to create an app with features such as snapping onto custom images, collision detection, drag and drop increasing shape dimensions etc. I dont mind if its learning more than one library etc. Thanks

    Reply
  2. Please check out ZIM at http://zimjs. com – it is a very complete library that extends CreateJS to give one-line drag and drop, multiple types of hitTests, components and much more. Have a look at the ZIM Bits section too with many examples of Interactive Media. Thanks! Code Pizzazz!

    Reply
  3. I think fabricjs is best for making interactive graphics application. I have made advanced photo editor using fabricjs.

    Reply
  4. Hi,
    Interesting list, thank you. There is also cgSceneGraph.
    It embeds a lot of cool features, is already used on public games and pro applications and the community is growing up.

    Hope you\’ll find the time to try it 🙂

    Reply

Leave a Comment