Another week, another JS library.
https://github.com/bit101/shapes
Again, I’m sure there are hundreds of other libraries that add improved functionality for Canvas drawing. There’s even CreateJS, which is super powerful, creating a Flash-like display list with animation, etc. That’s cool, but it kind of becomes a framework that you need to buy into fully. My goal was not to create a new paradigm, just make the existing one a bit easier to work with.
Almost everything in the library is stuff that I’ve created before. Again, I just decided to consolidate it all into one code base, clean it all up and put it up on github. If nothing else, I won’t need to write that stuff again. And if someone else finds it useful, either as a whole, or something to borrow bits and pieces from, that’s great.
Like the shaky library from last week, shapes wraps both the Canvas and Context2D. I’ve proxied most of the existing Context2D methods to the shapes object, so you can work directly from that for 99% of what you need to do. A lot of it is obvious stuff – circles, ellipses, rounded rects, polygons, etc. But there are some unique and fun items in there as well. Explore. The demo page will give you a few ideas of what’s possible.
http://www.bit-101.com/bitlib/shapes/
The source for the whole demo page is in the repo as well, so you can easily see the code that is used to create the examples.
Re: CreateJS – thanks for the mention! It’s worth a quick note that you definitely don’t have to buy into it fully. Besides being comprised of four separate libraries, it also has a lot of functionality that can be used independently.
Relevant to this discussion, the Graphics class can be used completely independently to provide a retained vector graphics model on top of canvas for ~10kb. The latest version provides a powerful extension model that lets you write command objects to define custom, dynamically updatable shapes (or other modifiers).
I’m not in any way suggesting you abandon Shapes for EaselJS, but I just wanted to clear up that detail. Also, if you’re at all interested, it might be worth a look to see if it makes any sense to tweak some of your shapes to be used as Graphics commands:
https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/Graphics.js#L1823
Thanks for the clarification. I’ve only really worked with CreateJS in the last few weeks, as it was in use on some content pieces that I’m updating/re-writing. Everything is using stage and shapes, etc. Once you go that route, it seems like CreateJS is managing the canvas, and it’s not so easy to mix in lower level context drawing api methods. That’s what I meant about “buying into” the framework as a whole.
If you see any shapes commands that you want to borrow, go for it.