Ask HN: Canvas Drawing Library

#1

Post by maresca » Thu, Oct 08, 2015, 5:48 PM UTC

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?

Re: Ask HN: Canvas Drawing Library

#2

Post by angersock » Thu, Oct 08, 2015, 6:05 PM UTC

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?

Re: Ask HN: Canvas Drawing Library

#3

Post by maresca » Thu, Oct 08, 2015, 6:23 PM UTC

angersock wrote: post #2

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?

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.

Re: Ask HN: Canvas Drawing Library

#4

Post by Aaronneyer » Thu, Oct 08, 2015, 6:38 PM UTC

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

Re: Ask HN: Canvas Drawing Library

#5

Post by maresca » Thu, Oct 08, 2015, 6:48 PM UTC

Aaronneyer wrote: post #4

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

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.

Re: Ask HN: Canvas Drawing Library

#6

Post by mindcrash » Thu, Oct 08, 2015, 7:04 PM UTC

maresca wrote: post #3

angersock wrote: post #2

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?

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.

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/

Re: Ask HN: Canvas Drawing Library

#7

Post by lochlan » Thu, Oct 08, 2015, 7:55 PM UTC

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.

Re: Ask HN: Canvas Drawing Library

#8

Post by doublerebel » Thu, Oct 08, 2015, 7:59 PM UTC

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.