Menu
Please tell me what libraries for drawing and handling of vector graphics within HTML5 Canvas do you know?
Thank you!!!
293
The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
There are a few options. I haven't used either of these libraries, but from what I can tell Cake seems generally more impressive, and imported, while also being three times as large. There is also the Burst Engine, currently an extension of processing.js, which is even smaller. I'm sure there are several more out there.
Processing.js
"Processing.js is the sister project of the popular Processing visual programming language..."
size: 412 KB
Raphael
"Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy."
Size: 60 KB
Snap.svg
The successor to Raphaël. Written by the same developer but intended only for modern browsers.
"Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap.
By providing a simple and intuitive JavaScript API for animation, Snap can help make your SVG content more interactive and engaging."
Size: 66 KB
Cake
"CAKE is a scenegraph library for the canvas tag. You could say that it's like SVG sans the XML and not be too far off."
Size:212 KB
Paper.js
"Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas."
Size: 627.91 KB
The Burst Engine
"The Burst Engine is an OpenSource vector animation engine for the HTML5 Canvas element. Burst provides similar web functionality to Flash and contains a layer based animation system like After Effects. Burst uses a very light-weight JavaScript frame, meaning your animations will download unnoticably quick and can be controlled using very simple JavaScript commands, allowing for chaining and callbacks. ... Burst is currently an extension of the excellent animation port Processing.js by John Resig. Development of an independant Burst Engine is under-way. This will reduce load-time and memory usage when you want to use Burst without using jQuery or Processing.js.
NOTE: Future versions of Burst will also run as a Native Processing applications, allowing you to run a Burst animation in a Java applet or as a binary executable."
It also seems it was last updated in 2010.
Size: 52.6 KB
drawing directly to the canvas with .context
This is NOT an external library, but drawing directly to the canvas through javascript.
123
http://paperjs.org/ was announced recently. It's amazing.
11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
