Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Canvas Vector Graphics? [closed]

Please tell me what libraries for drawing and handling of vector graphics within HTML5 Canvas do you know?

Thank you!!!

like image 293
Edward83 Avatar asked Dec 02 '10 21:12

Edward83


People also ask

Is HTML5 Canvas still used?

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.

What is HTML5 feel free on Google canvas?

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.


2 Answers

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.

like image 123
expiredninja Avatar answered Oct 09 '22 06:10

expiredninja


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

like image 11
a paid nerd Avatar answered Oct 09 '22 04:10

a paid nerd