Sunday, 27 June 2010

KanjiVG + HTML5 Canvas = Free stroke animations for all!

I spent half the day yesterday at 梅.py (a python "hack-a-thon" event in Osaka hosted by Accense) writing a 100% HTML5 Kanji stroke renderer that makes use of the excellent open-source KanjiVG dataset. The result is not what I'd call production ready but it still works quite well:

http://nippongrammar.appspot.com/

The KanjiVG XML data is parsed and thrown into a Google appengine data source and a JSON interface is provided to query individual kanji. The queried kanji's stroke data is retuned along with a group of up to 63 other kanji to save on server round-trips (the grouping is static).

My next step is to move the data to static JSON files that can be hosted anywhere and write client-side code to download the appropriate kanji data files directly.