javascript - What is the best way to draw text on an HTML canvas element? - Stack Overflow

admin管理员组

文章数量:1405734

The canvas element unfortunately doesn't handle text well. There are a bunch of approaches (see e.g. / ), but they mostly seem like hacks. What can I do that is cross-platform and gives me the most flexibility to make my fonts like how I want?

The canvas element unfortunately doesn't handle text well. There are a bunch of approaches (see e.g. http://canvaspaint/blog/2006/12/rendering-text/ ), but they mostly seem like hacks. What can I do that is cross-platform and gives me the most flexibility to make my fonts like how I want?

• javascript
• html
• text
• canvas

Share Follow edited Apr 28, 2009 at 11:09 Joachim Sauer 309k5959 gold badges567567 silver badges622622 bronze badges asked Apr 27, 2009 at 22:58 swampsjohnswampsjohn 7,05677 gold badges3939 silver badges4242 bronze badges 2

• 1 That link is old and the spec it points to has been updated to account for a text drawing api. For a similar (and hopefully helpful) question, see stackoverflow./questions/719848/… – Crescent Fresh Commented Apr 28, 2009 at 0:57
• fillText() is only supported in beta versions of Safari and Firefox (not sure about other browsers), which doesn't make it very useful. The various hacks mentioned in my link are mostly cross-platform. – swampsjohn Commented Apr 28, 2009 at 2:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Have you looked at typeface.js, http://typeface.neocracy. I hear it's pretty solid for writing text. Here's from their site:

"typeface.js uses browsers' vector drawing capabilites to draw text in HTML documents. For a good while, browsers have had support for vector drawing -- Firefox, Safari, and Opera support the <canvas> element (as well as SVG), and IE supports VML.

The typeface.js project has two ponents: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

In browsers that support <canvas> the text is selectable, but you have to have faith. As you select there's no feedback, no highlighting to let you know that it's working. Future work will aim to implement better, cross-browser support for selecting text with highlighting." (quote from http://typeface.neocracy/usage.html)

If you want to use the HTML5 text methods, you should try this library : http://code.google./p/canvas-text/ I'm the main developer, so I can help, and make changes really quickly.

The demos are here : http://canvas-text.googlecode./svn/trunk/examples/index.html

It is still in alpha stage, so any bug report and feedback are wele ! :)

本文标签： javascriptWhat is the best way to draw text on an HTML canvas elementStack Overflow