Web Canvas
In my last post, I was calling for contributors to write a web canvas using the <canvas> tag. If you don’t know it, <canvas> is a new tag specified in HTML5 which allows you to draw using a Javascript API. It is already supported in Firefox, Opera, Safari and is supported in Internet Explorer through a third-party Javascript.
Since nobody responded to my call (sic), I decided to tackle it by myself. It turns out that it was a nice little project. The canvas Javascript API is very similar to the cairo API so it was easy to use. I also improved my level in Javascript a lot. So far the web canvas supports draw, import (JSON), export (XML), save as an image and replay (stroke by stroke animation).
You can try it by using the online DEMO.
What can it be useful for?
- I’m planning to use it for the handwriting database website that I wrote about some time ago. While it will be possible to contribute your handwriting using a pygtk client (Desktop or Maemo), you will also be able to contribute your handwriting using your browser directly. Not having to install any program should help increase the number of people contributing their handwriting.
- A second way of using it would be to do handwriting recognition directly in the browser. For example, one could install Tomoe (or my recognizer when it’s ready ;-)) on the server side and the web canvas on the client side. Since Tomoe has Python and Ruby bindings, this is fairly easy!
You can reuse the web canvas for your own projects if you like but I would appreciate if you could send me any feature improvement. In particular, the web canvas has a bug under Internet Explorer that I couldn’t figure out…
Source code (GPL) : gitweb
November 15th, 2009 at 10:26 pm
I use Anki for learning kanji and I wanted to have a canvas so I could be stricter on myself about errors. I do my repetitions while commuting, so I’ve hacked this up to work reasonably well on my iPod Touch (and works on iPhones). I’m sure we could be smarter about gestures, but this is good enough for now.
I’m having trouble cloning your repository, so here’s the diff: http://sartak.org/tmp/itouch.diff.txt
Cheers.
November 16th, 2009 at 12:05 am
See also http://www.flickr.com/photos/sartak/4106690169/ :)
November 17th, 2009 at 4:21 pm
Thank you very much Shawn. Nice to see the webcanvas working on the IPhone.
Actually I’m also a user of Anki. I’ve been using the Maemo port of it on my N810. I also use the online service extensively to keep my laptop (where I prepare my vocab lists) and my N810 in sync.
I had a similar idea to you recently. Since anki is broken down into libanki and ankiqt, it should be possible to use libanki as backend and write a new frontend which uses handwriting recognition as input method. Since both my project Tegaki and Anki are written in Python, that seems like a good match. In ankiqt, you need to choose if you found the question hard, good or easy. With handwriting recognition, we can use the level of confidence returned by the recognizer instead.
What problems are you having with the repo exactly?