Strict Standards: Declaration of action_plugin_blog::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /www/htdocs/w00d9226/oliverh.com/lib/plugins/blog/action.php on line 13

Strict Standards: Declaration of action_plugin_discussion::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /www/htdocs/w00d9226/oliverh.com/lib/plugins/discussion/action.php on line 0

Strict Standards: Declaration of action_plugin_importoldchangelog::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /www/htdocs/w00d9226/oliverh.com/lib/plugins/importoldchangelog/action.php on line 0

Deprecated: Function split() is deprecated in /www/htdocs/w00d9226/oliverh.com/inc/auth.php on line 146

Warning: Cannot modify header information - headers already sent by (output started at /www/htdocs/w00d9226/oliverh.com/lib/plugins/blog/action.php:13) in /www/htdocs/w00d9226/oliverh.com/inc/auth.php on line 236

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /www/htdocs/w00d9226/oliverh.com/inc/auth.php on line 390

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /www/htdocs/w00d9226/oliverh.com/inc/auth.php on line 390

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /www/htdocs/w00d9226/oliverh.com/inc/auth.php on line 387

Strict Standards: Only variables should be passed by reference in /www/htdocs/w00d9226/oliverh.com/doku.php on line 69

Warning: Cannot modify header information - headers already sent by (output started at /www/htdocs/w00d9226/oliverh.com/lib/plugins/blog/action.php:13) in /www/htdocs/w00d9226/oliverh.com/inc/actions.php on line 350
====== Text Rendering on a HTML canvas ====== One often mentioned shortcoming of the HTML canvas element is drawing text, or to be more precise, the lack of this functionality. This lack seems to be intentional. To quote the current working draft (September 2006): > [D]rawing text is not supported in this version of the API > (there is no way to predict what metrics the fonts will have, > which makes fonts very hard to use for painting) The argument is valid. Normally you don't know the metrics because you don't know the font which is used for rendering. Even if you can specify CSS-like But isn't the same argument valid for SVG too? makes sense. However, afaik the same is true for SVG. You never know the metrics of the font . And if so, normally you cannot be sure that this font is available on the client. But wait, there is a way to make sure that the font is available: you can embed it. In the following I will discuss two different ways to embed font data. ===== Embedded Bitmap Fonts ===== The first approach is to embed * Use bitmap fonts * Render vector glyphs In the following, I will show three possible ways to overcome this limitation. The three possibilities are: * Use an embedded image * Use an overlapping div Benjamin Joffe shows a script that renders text by means of an image. The image contains pre-rendered glylphs. The image is base64-encoded and embedded in the script and loaded dynamically at runtime via the data:-url. Similar the approach by Mihai Parparita(?) works http://persistent.info/files/canvas-text/ The demo uses a ~87 kb png font. that canvas has no methods for drawing just a specific part of an image. However, this can be solved by setting an appropriate clipping area that just contain the bounding box of the glyph. http://www.random.abrahamjoffe.com.au/public/JavaScripts/canvas/fonts.htm http://www.xml.com/pub/a/2006/05/10/explorercanvas-interactive-web-apps.html ===== Embedded Vector Fonts =====