Ask HN: Canvas Drawing Library

16 pointsmaresca10y ago12 comments

I'm currently testing out Canvas JS libraries. I'd like to build a simple paint type of web app using Canvas and JS. I'd like to be able to create layers, draw, erase, etc. I tested out PaperJS, but it seems PaperJS is more geared towards SVG and fails at erasing. What popular Canvas JS libraries is everyone using nowadays?

12 comments

doublerebel10y ago

I prefer PixiJS (http://www.pixijs.com), it comes with a ton of primitives and renders efficiently even on mobile. I've created layered drag-and-drop webapps with Pixi, draw & erase would not be much different.

angersock10y ago

If you're building something simple, why not just use the HTML5 Canvas API?

There's no reason to overcomplicate things, and it'll give you fine control over how things work and what you expect it to do. Layers and whatnot are pretty simple to implement a rough cut of, so why make things complicated?

marescaOP10y ago

Going with the native Canvas API is where I'm heading. I've used RaphaelJS in the past. This week I've tested out PaperJS and FabricJS. I'm trying to save some time and code manageability with a framework.

mindcrash10y ago

If you loved RaphaelJS you'll probably like Snap.svg [1] aswell. It's originally authored by Dmitry Baranovskiy (Raphael's author) and sponsored by Adobe.

[1] http://snapsvg.io/

lochlan10y ago

I am a big fan of pixi.js (http://www.pixijs.com). I haven't explored its "erasing" capabilities, but it is a great library for performant 2d graphics programming in the browser.

fgtx10y ago

In simple cases like you described, you can always create your own. I've done something sorta like that in here: https://github.com/felipegtx/Raska

skuunk110y ago

If you have an ActionScript background, I highly recommend Easel JS.

http://www.createjs.com/easeljs

jvanveen10y ago

i really liked to use fabric.js(http://fabricjs.com) for a small collaborative drawing tool(https://github.com/wearespindle/dotd). It runs both on node.js and in the browser, has pretty awesome serialization options and has all batteries included in general.

Aaronneyer10y ago

Check out LiterallyCanvas: http://literallycanvas.com/

marescaOP10y ago

Excellent example, thanks! Looks like that has a dependency on React. I'm currently trying out Angular but I'll give this a shot too.

irenkai10y ago

I've allways been a fan of kineticJS (now Konva). Seems the most extensible and can handle a lot of objects.

gandydancer10y ago

How about http://fabricjs.com

j / k navigate · click thread line to collapse

12 comments

doublerebel10y ago

angersock10y ago

If you're building something simple, why not just use the HTML5 Canvas API?

marescaOP10y ago

mindcrash10y ago

If you loved RaphaelJS you'll probably like Snap.svg [1] aswell. It's originally authored by Dmitry Baranovskiy (Raphael's author) and sponsored by Adobe.

[1] http://snapsvg.io/

lochlan10y ago

I am a big fan of pixi.js (http://www.pixijs.com). I haven't explored its "erasing" capabilities, but it is a great library for performant 2d graphics programming in the browser.

fgtx10y ago

In simple cases like you described, you can always create your own. I've done something sorta like that in here: https://github.com/felipegtx/Raska

skuunk110y ago

If you have an ActionScript background, I highly recommend Easel JS.

http://www.createjs.com/easeljs

jvanveen10y ago

Aaronneyer10y ago

Check out LiterallyCanvas: http://literallycanvas.com/

marescaOP10y ago

Excellent example, thanks! Looks like that has a dependency on React. I'm currently trying out Angular but I'll give this a shot too.

irenkai10y ago

I've allways been a fan of kineticJS (now Konva). Seems the most extensible and can handle a lot of objects.

gandydancer10y ago

How about http://fabricjs.com

j / k navigate · click thread line to collapse