Drawing text using a canvas

  • Revision slug: Drawing_text_using_a_canvas
  • Revision title: Drawing text using a canvas
  • Revision id: 57120
  • Created:
  • Creator: BenoitL
  • Is current revision? No
  • Comment there is no such section in the page

Revision Content

{{template.Gecko_minversion_header(1.9)}} {{template.Fx_minversion_header(3)}} The <canvas> element supports drawing text on it via experimental Mozilla-specific APIs.

Method overview

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

Attributes

Attribute Type Description
mozTextStyle DOMString The current text style being used when drawing text. This string uses the same syntax as the CSS font specifier. To change the text style to use when drawing, simply change the value of this attribute, as demonstrated below. The default font is 12-point sans-serif.

For example:

ctx.mozTextStyle = "20pt Arial";

Methods

mozDrawText()

Draws the specified text using the text style specified by the mozTextStyle attribute. The context's current fill color is used as the text color.

void mozDrawText(
   in DOMString textToDraw
);

Parameters
<tt>textToDraw</tt>
The text to draw into the context.
Example
ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");

This example draws the text "Sample String" in red at the coordinates (10,50) in the canvas.

mozMeasureText()

Returns the width, in pixels, that the specified text will be when drawn in the current text style.

float mozMeasureText(
  in DOMString textToMeasure
);
Parameters
<tt>textToMeasure</tt>
The string whose width in pixels is to be determined.
Return value

The width of the text in pixels.

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

This example determines the width of the string, then uses that information to draw it centered horizontally within the canvas.

mozPathText()

Adds the strokes from the specified text to the current path. This allows you to stroke text instead of filling it if you wish.

void mozPathText(
  in DOMString textToPath
);
Parameters
<tt>textToPath</tt>
The text whose strokes are to be added to the current path.
Example
ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()

This example draws the text "Sample String" in green with black outlines by adding the strokes for the text to the current path, then filling the path and stroking it.

mozTextAlongPath()

Adds (or draws) the specified text along the current path.

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
Parameters
<tt>textToDraw</tt>
The text to draw along the specified path.
<tt>stroke</tt>
If this parameter is true, the text is drawn along the specified path. If false, the text is instead added to the path, following along the current path.
Remarks

The glyphs aren't scaled or transformed according to the curvature of the path; instead, each glyph is rendered treating the path under it as a straight line interpolated from the curvature of the path. This can be used to create some unique effects.

Remarks

  • 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.
  • See {{template.Bug(339553)}} if you'd like to read up on the implementation specifics.

Additional examples

{{ wiki.languages( { "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas" } ) }}

Revision Source

<p>{{template.Gecko_minversion_header(1.9)}}
{{template.Fx_minversion_header(3)}}
The <code><a href="en/HTML/Canvas">&lt;canvas&gt;</a></code> element supports drawing text on it via experimental Mozilla-specific APIs.
</p>
<h2 name="Method_overview"> Method overview </h2>
<table class="standard-table">

<tbody><tr>
<td> <code>void <a href="#mozDrawText.28.29">mozDrawText</a>(in <a href="en/DOMString">DOMString</a> textToDraw);</code>
</td></tr>
<tr>
<td> <code>float <a href="#mozMeasureText.28.29">mozMeasureText</a>(in DOMString textToMeasure);</code>
</td></tr>
<tr>
<td> <code>void <a href="#mozPathText.28.29">mozPathText</a>(in DOMString textToPath);</code>
</td></tr>
<tr>
<td> <code>void <a href="#mozTextAlongPath.28.29">mozTextAlongPath</a>(in DOMString textToDraw, in boolean stroke);</code>
</td></tr>
</tbody></table>
<h2 name="Attributes"> Attributes </h2>
<table class="standard-table">

<tbody><tr>
<td class="header">Attribute
</td><td class="header">Type
</td><td class="header">Description
</td></tr>

<tr>
<td><code>mozTextStyle</code>
</td><td><code><a href="en/DOMString">DOMString</a></code>
</td><td>The current text style being used when drawing text.  This string uses the same syntax as the <a href="en/CSS/font">CSS font</a> specifier.  To change the text style to use when drawing, simply change the value of this attribute, as demonstrated below.  The default font is 12-point sans-serif.
<p>For example:
</p>
<pre class="eval">ctx.mozTextStyle = "20pt Arial";
</pre>
</td></tr></tbody></table>
<h2 name="Methods">Methods</h2>
<h3 name="mozDrawText.28.29">mozDrawText()</h3>
<p>Draws the specified text using the text style specified by the <code>mozTextStyle</code> attribute.  The context's current fill color is used as the text color.
</p>
<pre class="eval">void mozDrawText(
   in DOMString textToDraw
);

</pre>
<h6 name="Parameters">Parameters</h6>
<dl><dt><tt>textToDraw</tt>
</dt><dd>The text to draw into the context.
</dd></dl>
<h6 name="Example">Example</h6>
<pre class="eval">ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");
</pre>
<p>This example draws the text "Sample String" in red at the coordinates (10,50) in the canvas.
</p>
<h3 name="mozMeasureText.28.29">mozMeasureText()</h3>
<p>Returns the width, in pixels, that the specified text will be when drawn in the current text style.
</p>
<pre class="eval">float mozMeasureText(
  in DOMString textToMeasure
);
</pre>
<h6 name="Parameters_2">Parameters</h6>
<dl><dt><tt>textToMeasure</tt>
</dt><dd>The string whose width in pixels is to be determined.
</dd></dl>
<h6 name="Return_value">Return value</h6>
<p>The width of the text in pixels.
</p>
<h6 name="Example_2">Example</h6>
<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>
<p>This example determines the width of the string, then uses that information to draw it centered horizontally within the canvas.
</p>
<h3 name="mozPathText.28.29">mozPathText()</h3>
<p>Adds the strokes from the specified text to the current path.  This allows you to stroke text instead of filling it if you wish.
</p>
<pre class="eval">void mozPathText(
  in DOMString textToPath
);
</pre>
<h6 name="Parameters_3">Parameters</h6>
<dl><dt><tt>textToPath</tt>
</dt><dd>The text whose strokes are to be added to the current path.
</dd></dl>
<h6 name="Example_3">Example</h6>
<pre class="eval">ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()
</pre>
<p>This example draws the text "Sample String" in green with black outlines by adding the strokes for the text to the current path, then filling the path and stroking it.
</p>
<h3 name="mozTextAlongPath.28.29">mozTextAlongPath()</h3>
<p>Adds (or draws) the specified text along the current path.
</p>
<pre class="eval">void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
</pre>
<h6 name="Parameters_4">Parameters</h6>
<dl><dt><tt>textToDraw</tt>
</dt><dd>The text to draw along the specified path.
</dd><dt><tt>stroke</tt>
</dt><dd>If this parameter is <code>true</code>, the text is drawn along the specified path.  If <code>false</code>, the text is instead added to the path, following along the current path.
</dd></dl>
<h6 name="Remarks">Remarks</h6>
<p>The glyphs aren't scaled or transformed according to the curvature of the path; instead, each glyph is rendered treating the path under it as a straight line interpolated from the curvature of the path.  This can be used to create some unique effects.
</p>
<h2 name="Remarks_2"> Remarks </h2>
<ul><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> See {{template.Bug(339553)}} if you'd like to read up on the implementation specifics.
</li></ul>
<h2 name="Additional_examples"> Additional examples </h2>
<ul><li> <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">Stroking text around paths</a>
</li><li> <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">Drawing along a path</a>
</li><li> <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">Animating text moving around a circle</a>.
</li></ul>
<div class="noinclude">
</div>
{{ wiki.languages( { "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas" } ) }}
Revert to this revision