We Keep Coding

Is there a Javascript library for Paint-like applications using canvas? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
Is there a Javascript library which has built-in features for quickly creating a Paint-like web application using the canvas element?
EDIT: So, far, I have found Javascript libraries that allow easy animation of canvas elements -- such as Raphael JS -- and Javascript tutorials for creating simple Paint apps, but no robust libraries for Paint-like applications.
EDIT 2: I found a Javascript tutorial on a pretty nice looking Paint app using the canvas element. I'd still like to see what others have found.

Raphaël
Raphaël doesn't use Canvas. It uses SVG on browsers that support it or VML on Internet Explorer.
SVG
If you want an SVG solution designed specifically for drawing then take a look at:
SVG-edit
See this demo.
Canvas
If you want to use Canvas but you need a retained mode rendering then see:
Fabric.js
Paper.js
Processing.js
EaselJS
KineticJS
bHive
Update (February 2014)
ART, a retained mode vector drawing API - targets all three of HTML5 Canvas, SVG and VML (plus some code generation). Used by the Facebook team together with the React UI toolkit (see: react-art and the "art" branch of the react-page project on GitHub).

Literally Canvas fits this exact purpose: http://literallycanvas.com
"Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget...You can use it to embed drawing boards in web pages."

There is processingJS, but as it is port of the JAVA bassed processing you write your code in "javaish" processing language. But after all you could create what an paint like app. Another framework is fabricJS which is also really great to work with canvas.

There is an npm package spainter. Click on Run code snippet bellow and go fullscreen
var p = new Painter(containerPainter);</script>
<script src="https://cdn.jsdelivr.net/npm/spainter#1.0.0/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter#1.0.1/index.css"/>
<div id="containerPainter"></div>
or via webpack (or any other loader):
npm i spainter lines-logger
in your js:
import Painter from 'spainter';
import 'spainter/index.sass'; // you can impor index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
import {LoggerFactory} from 'lines-logger';
const containerPainter = document.createElement('div');
document.body.appendChild(containerPainter);
const p = new Painter(containerPainter, {logger: new LoggerFactory().getLoggerColor('spainter', 'blue')});
Live Demo

You can try Painterro.
It can be used for pasting and processing screenshots, cropping, drawing primitives and text, rotating, resizing (changing resolution), scaling, drawing arrows, exporting with desired compression level, supports hotkeys
Live Demo
Painterro has a browser-script version
and npm package
Could be easily integrated with any SPA like Vue/React, works well in electron/cordova,
Disclosure: I am a founder of Painterro

I think the closest you'll get is to expand on what that tutorial has gone through.
It's hard to create "general purpose" paint-like functionality due to the wide range of requirements.

2D Canvas in Browser

I'm looking for a framework or library to use the browser as a 2D "drawing" tool.
Acctually drawing is not the right word. It should be a adding, removing and moving around of 2D objects and images on a canvas. The objects should be graphically connectable. So - kind a visio in a browser
I guess it's a bit to much for a javascript library like dojo or prototype but what about a flash framework like flex or openlaszolo?
Thanks!

Most modern browsers now support the <canvas> tag in HTML5, which does pretty much what you're asking for. You can draw directly onto it using Javascript. Also in most modern browsers is support for the SVG graphic format, which again can be manipulated via Javascript to do some very funky effects. The difference between canvas and SVG is that canvas is for bitmap graphics and SVG is vectors. But both are good for 2D drawing.
If you need a library or framework on top of that, you could try something like Raphael, which is a good JS library for drawing vector graphics. It even supports older versions of Explorer, which is a bonus. (if SVG isn't available it falls back to VML).

iLog Exlixir offers some graphing components which would probably help.

OpenLaszlo can definitely do this. Here is a link to an OpenLaszlo application that is an online alternative to Visio:
http://www.gliffy.com/
I also have personally developed and maintained an OpenLaszlo video editing application over the past 6 years that allows you to drag images and videos to different positions and layers similar to what you describe, you can try it here if you want:
http://www.sarolta.tv/web/sarolta-tools/template-editor.html

Web charting libraries for mobile, our own research [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
We are looking for a nice javascript-based library for a web charting application we have been asked to do. The charts will be accessible and should actually be nice to interact with via mobile devices (iOS, Android, and the like). The user will be able to drill-down into some datasets, so the snappier (both processing graphics and loading data) and the more interactive, the better.
Nowadays, there are countless options out there, and many aspects to look at. Based on my research, I have put together the following list. Apologies beforehand for any mistake, it is not intended to be 100% complete or accurate.. but I think that still useful:
https://spreadsheets.google.com/pub?key=0As7T_22rXSbtdF9YeklwcUVXSEdwQnN0a0FvcWpoU2c&output=html
What is your opinion? Do you have any experiences in such kind of application? Maybe some candidate I am missing?
We are narrowing down the choice, but I am still not sure as for what choice is the best bet. Some questions that pop-up in my mind:
Different ways of rendering the chart (SVG/VML versus HTML 5 canvas). Which one is more suited to browsers in mobile devices? Which one is more suited to user interaction?
Making it look good. Which libraries allow to easily tweak appearance? Is CSS really powerful for this?

You missed out Sencha Touch

first of all, if mobile support is a must-have for you, discard SVG as a solution. It's not widespread supported. Canvas in the other hand, is not supported by old versions of IE, but can be simulated via VML with the exCanvas.js library.
About making it looking good, CSS has nothing to do with these libraries. CSS affects DOM elements, and canvas content is binary data. Canvas is, as the word says, a blank canvas for you to draw in via a Javascript API. Once you draw a line in a canvas element, that information is just pixels in the canvas.
BTW, is a good list the one you collected, and I'm pretty sure it's quite complete. The only intruder in it is Dundas. First of all, is a .Net library, and generates the charts in the server. Second, is deprecated. Dundas is no longer selling components, they're totally engaged with their dashboards solution.
Hope I'd help.

I've chosen Flot for several projects now and it has worked well. It's well documented with lots of examples, configurable, looks great, and is extensible. It is dependent on jQuery.

You might also want to add dhtmlxChart to your list.
It's a Canvas based JavaScript charting library that supports different chart types: line, pie, area, bar, radar, etc. dhtmlxChart is distributed under GPL v2 (commercial license is needed to use it in a proprietary project).
(Disclaimer: I work for DHTMLX)

I know this is an old question, but we had to do a similar research recently.
We focused our study on mobile charting libraries (Android and iOS, native or hybrid -with Cordova-) supporting line / area charts. All the information has been gathered from the websites of the respective chart libraries and no personal test has been made (yet).
Here's the result:
https://goo.gl/0tVC6a
I hope it helps.

Which technology would you use for Physics Simulations SVG or Canvas?

I'm starting a new project converting physics simulations(created in Adobe Director)
to a more current platform namely html5 canvas or SVG. I would like to avoid Flash for a few reasons. I'm looking for recommendations and reasons why either canvas or SVG would fit this project best. I have read that SVG is better for interactivity which in this case is important but that it is not the best with animation. Canvas is better at animations but it struggles with interaction so I have heard. Does anyone have experience with the interaction side of canvas, is it really that difficult? Please advise. Thanks

See this question for discussion of canvas frameworks and libraries:
What is the current state of the art in HTML canvas JavaScript libraries and frameworks?
A few of the canvas libraries listed replicate SVG in terms of object interaction to a fairly high standard. fabric.js looks particularly nice and is currently being actively developed.

Interactivity in canvas doesn't have to be all that difficult (there are quite a few js libraries out there to help you). And animation in svg is quite possible to do, see e.g svg-wow.org. Remember that you can mix and match svg and canvas as you see fit in order to use the strengths of each of these technolgies, as demonstrated here.

jQuery SVG vs. Raphael [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know
What the trade-offs are between the two
Where the development momentum seems to be.
I don't need the VML/IE support in Raphael, or the plotting abilities of jQuery SVG. I'm primarily interested in the most elegant way to create, animate, and manipulate individual items on an SVG canvas.

I've recently used both Raphael and jQuery SVG - and here are my thoughts:
Raphael
Pros: a good starter library, easy to do a LOT of things with SVG quickly. Well written and documented. Lots of examples and Demos. Very extensible architecture. Great with animation.
Cons: is a layer over the actual SVG markup, makes it difficult to do more complex things with SVG - such as grouping (it supports Sets, but not groups). Doesn't do great w/ editing of already existing elements.
jQuery SVG
Pros: a jquery plugin, if you're already using jQuery. Well written and documented. Lots of examples and demos. Supports most SVG elements, allows native access to elements easily
Cons: architecture not as extensible as Raphael. Some things could be better documented (like configure of SVG element). Doesn't do great w/ editing of already existing elements. Relies on SVG semantics for animation - which is not that great.
SnapSVG as a pure SVG version of Raphael
SnapSVG is the successor of Raphael. It is supported only in the SVG enabled browsers and supports almost all the features of SVG.
Conclusion
If you're doing something quick and easy, Raphael is an easy choice. If you're going to do something more complex, I chose to use jQuery SVG because I can manipulate the actual markup significantly easier than with Raphael. And if you want a non-jQuery solution then SnapSVG is a good option.

For posterity, I'd like to note that I ended up choosing Raphael, because of the clean API and "free" IE support, and also because the active development looks promising (event support was just added in 0.7, for instance). However, I'll leave the question unanswered, and I'd still be interested to hear about others' experiences using Javascript + SVG libraries.

I'm a huge fan of Raphael and the development momentum seems to be going strong (version 0.85 was released late last week). Another big plus is that its developer, Dmitry Baranovskiy, is currently working on a Raphael charting plugin, g.raphael, which looks like its shaping up to be pretty slick (there are a few samples of the output from the early versions on Flickr).
However, just to throw another possible contender into the SVG library mix, Google's SVG Web looks very promising indeed (even though I'm not a big fan of Flash, which it uses to render in non-SVG compliant browsers). Probably one to watch, especially with the upcoming SVG Open conference.

Raphael is definitely easier to set up and get going, but note that there are ways of expressing things in SVG that are not possible in Raphael. As noted above there are no "groups". This implies that you can't implement layers of Coordinate Transfomations. Instead there is only one coordinate transform available.
If your design depends on nested coordinate transforms, Raphael is not for you.

Oh Raphael has moved on significantly since June.
There is a new charting library that can work with it and these are very eye catching.
Raphael also supports full SVG path syntax and is incorporating really advanced path methods. Come see 1.2.8+ at my site (Shameless plug) and then bounce over to the Dmitry's site from there.
http://www.irunmywebsite.com/raphael/raphaelsource.html

I think it is not totally unrelated but did you consider canvas? something like Process JS can make it simpler.

You should also take a look at svgweb. It uses flash to render svg in IE, and optionally on other browsers (in the cases where it supports more than the browser itself does).
http://code.google.com/p/svgweb/

I will throw my vote behind Raphael - the cross-browser support, clean API and consistent updates (so far) make it a joy to use. It plays very nicely with jQuery too. Processing is cool, but more useful as a demo for bleeding-edge stuff at the moment.

As a Javascript beginner, I found Rapahel samples not so easy, I recommend http://cancerbero.mbarreneche.com/raphaeltut, which is a real Step by step tutorial.

For those who don't care about IE6/IE7, the same guy who wrote Raphael built an svg engine specifically for modern browsers: Snap.svg .. they have a really nice site with good docs: http://snapsvg.io
snap.svg couldn't be easier to use right out of the box and can manipulate/update existing SVGs or generate new ones. You can read this stuff on the snap.io about page but here's a quick run down:
Cons
To make use of snap's features you must forgo on support for older browsers. Raphael supports browsers like IE6/IE7, snap features are only supported by IE9 and up, Safari, Chrome, Firefox, and Opera.
Pros
Implements the full features of SVG like masking, clipping, patterns, full gradients, groups, and more.
Ability to work with existing SVGs: content does not have to be generated with Snap for it to work with Snap, allowing you to create the content with any common design tools.
Full animation support using a straightforward, easy-to-implement JavaScript API
Works with strings of SVGs (for example, SVG files loaded via Ajax) without having to actually render them first, similar to a resource container or sprite sheet.
check it out if you're interested: http://snapsvg.io

Since it's not mentioned here yet:
You should also take a look at Dojox.drawing, which also provides good SVG drawing capabilities. It has a pretty impressive set of features. I'm just starting a project with it, but it seems to me that it's far superior (at least in terms of features) to Raphael and JQuerySVG.
This presentation convinced me to use it instead of Raphael/JQuerySVG:
http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Reference:
http://dojotoolkit.org/reference-guide/dojox/index.html
Reference on Dojocampus:
http://docs.dojocampus.org/dojox/drawing
Download Dojo (including Dojox):
http://dojotoolkit.org/download/

Another svg javascript library you might want to look at is d3.js. http://d3js.org/

I prefer using RaphaelJS because it has great cross-browser abilities. However, some SVG & VML effects can't be achieved with RaphaelJS (complex gradients...).
Google has also developped a library of its own to enable SVG support in IE:
http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

If you don't need VML and IE8 support then use Canvas (PaperJS for example). Look at latest IE10 demos for Windows 7. They have amazing animations in Canvas. SVG is not capable to do anything close to them.
Overall Canvas is available at all mobile browsers. SVG is not working at early versions of Android 2.0- 2.3 (as I know)
Yes, Canvas is not scalable, but it so fast that you can redraw the whole canvas faster then browser capable to scroll view port.
From my perspective Microsoft's optimizations provides means to use Canvas as regular GDI engine and implement graphics applications like we do them for Windows now.