HTML5 Canvas libraries aim to wrap the Canvas element and extend it one way or another to make a better syntax and functionality. These libraries come as a helping hand to understanding and using HTML5 Canvas to its full potential. In this article you will see the HTML5 Canvas wrapper libraries that are available at the moment. Check them out thoroughly and see what each one has to offer and, ultimately, if it is useful to you.
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.
Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths.
You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.
You can add text on canvas and dynamically manipulate its size, alignment, fontfamily and other properties. You can apply filters to images, making them grayscale or removing background. You can serialize the entire canvas into a JSON string — saving it locally or on a server — then completely restore it at any time. You can also export canvas data back into SVG at any time.
canvas_library is written in CoffeeScript. canvas_library gives you easy drawing, object and animation management for the HTML 5 Canvas element. The API itself looks a lot like the Flash drawing API.
Canvas Context 2D Wrapper
Wrapper for HTML5 Canvas Context 2D properties and methods, enabling chaining. It’s intended to be simple, small and not add new functionalities besides method chaining, it doesn’t overwrite the native prototypes/objects and can be used interchangeably with native Context2D methods/properties, works just as a wrapper to native calls.
HTML 5 Canvas Library
Various utility methods will be added to this library over time to abstract away the low-level drawing methods found in HTML 5 canvas.
Doodle-js (inactive, but still mentioned)
The source files are separated to some degree for ease of maintenance. To create a single, minified, file run the mk_drawlib2dv.sh file. This uses an open-source minifier written in Python.
The source files include documentation inline. This is extracted during the build process by running another python script.
HTML5 has all of the functions necessary to draw whatever you want, but sometimes the API leaves a little to be desired. This module attempts to add convenience methods to the HTML5 API.