Wednesday, July 28th, 2010
Canto.js: An Improved Canvas API
Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example:
JAVASCRIPT:
canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke();
Notice three things:
- canto() returns an abstraction of the canvas - a "Canto" object.
- As with jQuery and similar libraries, there's method chaining; each method called on a Canto also returns the Canto.
- lineTo() has been extended to support multiple lines being drawn in a single call.
Instead of setting the ink properties and then painting it, you can do it all in one step:
JAVASCRIPT:
canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke({lineWidth: 15, strokeStyle: "red"});
And plenty more syntactic sugar - check out the API in the source code comments. Sweet!
Thanks @pkeane.
I currently using a lot of canvas on a project and it can be a bit of a pain, as it is very low level. So I would like to try out the library, but I think lack of Internet Explorer support is a real deal breaker.
SVG probably would have been a better fit for my project, but lack of support in Internet Explorer, forced me into using explorer-canvas.js. So far I am really impressed with how well this successfully emulates a real canvas.
I do like the look of the library, the svgpath function is particularly useful.
@McDaid – Tried Raphael? (http://www.raphaeljs.com)
It’s kind of silly that the canvas API is so bad that you have put an abstraction layer on top of it… Of course – getting an API right in one go is very hard. Especially if you have no clue what people are going to use it, how and for what.
@sixtyseconds
I did try Raphael, but initially had problems with it not working on my computer set up in Internet Explorer. The issue has now been fixed, but it put me off a bit using the library.
The API for canvas can be slightly tedious to work with at first, but I think it is actually very powerful after a bit of practice.
It would be nice to have something like this as jQuery plugin.
Very nice, I like how it handles SVG path strings.
@McDaid – The thing i really prefer about using SVG as opposed to canvas is being able to script the elements afterwards.
Well done! Very impressive.
The Canvas API sure could be better, but adding another API layer that affect performance for a bit of syntactic sugar seems like a bad choice.
To write less code, use ‘with’:
with (canvas.getContext('2d')) beginPath(), moveTo(100,100), lineTo(200,200), lineTo(100,200), stroke();
Sure ‘with’ also has a performance penalty, but less than canton.js wrapped function calls.
@sixtyseconds
You are correct SVG has that advantage, with canvas any time anything changes I repaint the whole canvas. In browser with native canvas, it is very fast and so this doesn’t really matter. In internet explorer using explorer canvas this a bit more problematic, and animations will become choppy if there are many calculations and objects being drawn.
SVG is much better if mouse interactions are needed, because mouse events can be attached to any svg shape.
@Stakka
Unless you are writing a game and want the best possible frame rate, I don’t think using the library is going to adversely affect performance. If you want to draw a complex shape such as the famous SVG lion then a function of some kind is needed to process all the points, lines, curves etc. Writing the code the long way would require a longer download time also affecting performance.
If you just want method chaining in Canvas, see https://developer.mozilla.org/en/Code_snippets/Canvas
This is totally off topic… but now that the guys have gone, we’ve got from 1-2 posts a day to 1-2 a week. If this keeps up, Ajaxian is going to fall off my radar. Any one got another Ajax focused website I can start checking out?
For some reason I still check this site daily. I think that is about to change though…
@ifwdev yeah, me too – this site seems a bit dead now. what is everyone else reading instead of ajaxian now?
http://dailyjs.com/ – purely javascript site, some similar content though.
@adunn – Thanks for the link!
I also periodically check Chris Heilmann’s and Michael Mahemoff’s blogs (available on the links at the right). They’re smart and they have interesting and relevant things to say.
@ifwdev: same as you … :(
@ifwdev: yeah… surprised nobody has really stepped up. Is there an open call for contributors/editors?
Can any one else see my comments? I can’t see my comment about wanting to find a new site unless I’m logged in.