Wednesday, July 28th, 2010

Canto.js: An Improved Canvas API

Category: Canvas, JavaScript, Library

<>p>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
< view plain text >
  1. 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
< view plain text >
  1. 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.

Related Content:

Posted by Michael Mahemoff at 11:10 pm
19 Comments

++---
2.8 rating from 4 votes

19 Comments »

Comments feed TrackBack URI

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.

Comment by McDaid — July 29, 2010

@McDaid – Tried Raphael? (http://www.raphaeljs.com)

Comment by sixtyseconds — July 29, 2010

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.

Comment by rasmusfl0e — July 29, 2010

@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.

Comment by McDaid — July 29, 2010

It would be nice to have something like this as jQuery plugin.

Comment by kixo — July 29, 2010

Very nice, I like how it handles SVG path strings.

Comment by Jadet — July 29, 2010

@McDaid – The thing i really prefer about using SVG as opposed to canvas is being able to script the elements afterwards.

Comment by sixtyseconds — July 29, 2010

Well done! Very impressive.

Comment by mchammer — July 29, 2010

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.

Comment by Stakka — July 29, 2010

@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.

Comment by McDaid — July 29, 2010

If you just want method chaining in Canvas, see https://developer.mozilla.org/en/Code_snippets/Canvas

Comment by brettz9 — July 29, 2010

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?

Comment by jhartmann — August 3, 2010

For some reason I still check this site daily. I think that is about to change though…

Comment by ifwdev — August 3, 2010

@ifwdev yeah, me too – this site seems a bit dead now. what is everyone else reading instead of ajaxian now?

Comment by leptons — August 3, 2010

http://dailyjs.com/ – purely javascript site, some similar content though.

Comment by adunn — August 4, 2010

@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.

Comment by pianoroy — August 4, 2010

@ifwdev: same as you … :(

Comment by vjeux — August 4, 2010

@ifwdev: yeah… surprised nobody has really stepped up. Is there an open call for contributors/editors?

Comment by genericallyloud — August 5, 2010

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.

Comment by jhartmann — August 5, 2010

Leave a comment

You must be logged in to post a comment.