Drawing text using a canvas

  • Revision slug: Drawing_text_using_a_canvas
  • Revision title: Drawing text using a canvas
  • Revision id: 57113
  • Created:
  • Creator: Mgjbot
  • Is current revision? No
  • Comment robot Adding: [[ja:Canvas:Text]] <<langbot>>

Revision Content

{{template.Gecko_minversion_header(1.9)}} {{template.Firefox3()}} Starting with Firefox 3 (Gecko 1.9), the <canvas> element supports drawing text on it via experimental Mozilla-specific APIs.

API

attribute DOMString mozTextStyle; 
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);

Examples

See some examples here, here, and here. You will need a Firefox 3a7 build (Windows users will need a post-a7 "nightly" build).

Notes

  • Default font is 12pt sans serif
  • These text extensions are not standardized yet by WHATWG
  • You do not need a special context to use these; the 2d context works just fine
  • All drawing is done using the current transform
  • Implemented in {{template.Bug(339553)}}

Changing the current font

The mozTextStyle attribute reflects the current text style. It uses the same syntax as the CSS font specifier.

Ex:

ctx.mozTextStyle = "20pt Arial"

Drawing text

Drawing is very simple. mozDrawText uses whatever the current text style is. The context's fill color is used as the text color.

ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");

Measuring text

Sometimes it is useful to know how wide a particular bit of text is (say for centering it in a window).

var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate(len/2, 0);
ctx.mozDrawText(text);

Text/path interaction

If you want to stroke text, mozDrawText doesn't let you. However, mozPathText adds the strokes from the text to the current path.

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()

Now say you have a path that you want to add text along (say a curved line or something); this is where mozTextAlongPath comes in. Unlike the other text functions, mozTextAlongPath takes two arguments: the text and what to do with it. mozTextAlongPath approximates the current path as a series of line segments and places each glyph along that flattened path. The glyphs are not scaled or transformed according to the curvature of their baseline; they take on the orientation of the flattened path at the midpoint of the glyph.

Once mozTextAlongPath knows where the glyphs are, it looks at the second parameter to decide what to do with them. If the second parameter is false, then it will draw the glyphs just like mozDrawText does. If it is true, then it will add the glyphs to the current path, just like mozPathText does. This can be used to create some unique effects.

{{ wiki.languages( { "ja": "ja/Canvas/Text" } ) }}

Revision Source

<p>{{template.Gecko_minversion_header(1.9)}}
{{template.Firefox3()}}
Starting with <a href="en/Firefox_3">Firefox 3</a> (<a href="en/Gecko">Gecko</a> 1.9), the <code><a href="en/HTML/Canvas">&lt;canvas&gt;</a></code> element supports drawing text on it via experimental Mozilla-specific APIs.
</p>
<h3 name="API"> API </h3>
<pre class="eval">attribute DOMString mozTextStyle; 
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
</pre>
<h3 name="Examples"> Examples </h3>
<p>See some examples <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">here</a>, <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">here</a>, and <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">here</a>. You will need a Firefox 3a7 build (Windows users will need a post-a7 "nightly" build).
</p>
<h3 name="Notes"> Notes </h3>
<ul><li> Default font is 12pt sans serif
</li><li> These text extensions are not standardized yet by WHATWG
</li><li> You do not need a special context to use these; the 2d context works just fine
</li><li> All drawing is done using the current transform
</li><li> Implemented in {{template.Bug(339553)}}
</li></ul>
<h3 name="Changing_the_current_font"> Changing the current font </h3>
<p>The <code>mozTextStyle</code> attribute reflects the current text style. It uses the same syntax as the <a href="en/CSS/font">CSS font</a> specifier.
</p><p>Ex:
</p>
<pre class="eval">ctx.mozTextStyle = "20pt Arial"
</pre>
<h3 name="Drawing_text"> Drawing text </h3>
<p>Drawing is very simple. <code>mozDrawText</code> uses whatever the current text style is. The context's fill color is used as the text color.
</p>
<pre class="eval">ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");
</pre>
<h3 name="Measuring_text"> Measuring text </h3>
<p>Sometimes it is useful to know how wide a particular bit of text is (say for centering it in a window).
</p>
<pre class="eval">var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate(len/2, 0);
ctx.mozDrawText(text);
</pre>
<h3 name="Text.2Fpath_interaction"> Text/path interaction </h3>
<p>If you want to stroke text, <code>mozDrawText</code> doesn't let you. However, <code>mozPathText</code> adds the strokes from the text to the current path.
</p>
<pre class="eval">ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()
</pre>
<p>Now say you have a path that you want to add text along (say a curved line or something); this is where <code>mozTextAlongPath</code> comes in. Unlike the other text functions, <code>mozTextAlongPath</code> takes two arguments: the text and what to do with it. <code>mozTextAlongPath</code> approximates the current path as a series of line segments and places each glyph along that flattened path. The glyphs are not scaled or transformed according to the curvature of their baseline; they take on the orientation of the flattened path at the midpoint of the glyph.
</p><p>Once <code>mozTextAlongPath</code> knows where the glyphs are, it looks at the second parameter to decide what to do with them. If the second parameter is <code>false</code>, then it will draw the glyphs just like <code>mozDrawText</code> does. If it is <code>true</code>, then it will add the glyphs to the current path, just like <code>mozPathText</code> does. This can be used to create some unique effects.
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "ja": "ja/Canvas/Text" } ) }}
Revert to this revision