HTML5 Canvas Vector Graphics? [closed]

Solution 1:

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.

Solution 2:

http://paperjs.org/ was announced recently. It's amazing.