Text in Canvas

Currently, the Canvas API does not include the ability to draw text strings. That makes several potential Canvas applications, such as dynamic graphs or maps, more complex than necessary. Instead of using the text facilities of the platform, Canvas applications need to bundle their own vector fonts or use inaccessible pre-rendered images for text display. Thus, using Canvas it is unattractive for authors and users are forced to use a proprietary plugin (Flash) for some applications.

Use Case Description

• Maps (Street names, ...)
• All kinds of graphs needing labels
• Games (High score, "Game Over" etc)

Current Limitations

Explanation of why the current markup is insufficient.

Possible workarounds and the associated problems are described in great detail at http://canvaspaint.org/blog/2006/12/rendering-text/

Executive Summary:

• Images are large and do not scale
• Vector fonts are large, too

Moreover, the workarounds make accessibility more difficult, and authors need to worry about font copyright, normally addressed by the users operating system vendor

Current Usage and Workarounds

Some evidence that this feature is desperately needed on the web. You may provide a separate examples page for listing these.

• http://osteele.com/sources/javascript/docs/textcanvas
• http://canvaspaint.org/blog/2006/12/rendering-text/
• http://www.random.abrahamjoffe.com.au/public/JavaScripts/canvas/fontGenerator.htm
• http://minijoe.com/ota/emulator?sid=canvasoids
• http://minijoe.com/ota/emulator?sid=canvasout

Benefits

Explanation of how and why new markup would be useful.

The problems described in "Current Limitations" would disappear :)

Requests for this Feature

• http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2006-October/007363.html
• http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-June/006527.html

Proposed Solutions

My Solution

Brief description of the solution and of how it address the problem at hand.

see http://rhino-canvas.sourceforge.net/www/drawstring.html#api

Processing Model

Explanation of the changes introduced by this solution. It explains how the document is processed, and how errors are handled. This should be very clear, including things such as event timing if the solution involves events, how to create graphs representing the data in the case of semantic proposals, etc.

Limitations

Cases not covered by this solution in relation to the problem description; other problems with this solution, if any.

Implementation

Description of how and why browser vendors would take advantage of this feature.

Adoption

Reasons why page authors would use this solution.