Hyphenation and Justification

[AprilArcus]

This pull request rewrites measureText.js to support hyphenation via Bram Stein's hypher.js library, and changes the output format of the measureText() function to include fragment widths, which drawText() in CanvasUtils.js can use to set full-justified text blocks.

The original version contains an O(n²) while(words.length) { words.shift() } construction (measureText.js line 86). I believe this version has O(n) time complexity, but I still need to profile this version against the old one.

I've kept an eye toward including Knuth & Plass, high-quality O(n²) linebreaking in the future.

[AprilArcus]

I did some coarse benchmarks of the measureText() function (bracketing it in calls to console.time() and console.timeEnd()) in a 1300x570 px viewport filled with the first 10k words of Moby Dick rendered at a font size of 6px. Times are average of five, as measured on a Sandy Bridge MacBook Air:

	initial render	reflow during horizontal resize
current code	223.0ms	243.3ms
pull request (hyphens: none)	115.9ms	16.9ms
pull request (hyphens: auto)	194.6ms	15.5ms

Lower reflow times represent gains from memoizing calls to Canvas.measureText() with high granularity. Overall frame rate does not improve much, since drawText() now spends much more time drawing text than measuring it. I wonder if caching rendered text as bitmaps might be a good direction to look into for further perf gains? As a point of reference, an OS X HTML5 <textarea> element reflows at 60fps in the same conditions, which was non-trivial in its time.

[tuxracer]

This breaks the timeline example

[AprilArcus]

Thanks for bringing that to my attention; I've revised the careless re-ordering of parameters that lead to this problem.