Drawing text using a canvas

  • Revision slug: Drawing_text_using_a_canvas
  • Revision title: Drawing text using a canvas
  • Revision id: 286956
  • Created:
  • Creator: jviereck
  • Is current revision? No
  • Comment Fix intro text: Return type is not the width directly but an object. See `Return value` section which states it right.; 3 words added

Revision Content

{{ Gecko_minversion_header(1.9) }}

The canvas element supports text drawn in it using both standard HTML 5 features and a few experimental Mozilla methods and properties.

The text can be comprised of any Unicode characters, including even those out of the Basic Multilingual Plane.

{{ fx_minversion_note("3.5", "In Firefox 3.5 and later, any configured shadow effects are applied to text when drawn.") }}

Method overview

void fillText(in DOMString text, in float x, in float y, [optional] in float maxWidth); {{ gecko_minversion_inline("1.9.1") }}
nsIDOMTextMetrics measureText(in DOMString textToMeasure); {{ gecko_minversion_inline("1.9.1") }}
void mozDrawText(in DOMString textToDraw); {{ deprecated_inline() }}
float mozMeasureText(in DOMString textToMeasure); {{ deprecated_inline() }}
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
void strokeText(in DOMString text, in float x, in float y, [optional] in float maxWidth); {{ gecko_minversion_inline("1.9.1") }}

 

Attributes

Attribute Type Description
font {{ gecko_minversion_inline("1.9.1") }} 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 10px sans-serif.

For example:

ctx.font = "20pt Arial";
mozTextStyle {{ deprecated_inline() }} DOMString

Deprecated in favor of the HTML 5 font attribute described above.

textAlign {{ gecko_minversion_inline("1.9.1") }} DOMString

The current text alignment being used when drawing text.  Possible values:

left
The text is left-aligned.
right
The text is right-aligned.
center
The text is centered.
start
The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).
end
The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).

The default value is start.

textBaseline {{ gecko_minversion_inline("1.9.1") }} DOMString

The current text baseline being used when drawing text.  Possible values:

top
The text baseline is the top of the em square.
hanging
The text baseline is the hanging baseline.  Currently unsupported; this will act like alphabetic.
middle
The text baseline is the middle of the em square.
alphabetic
The text baseline is the normal alphabetic baseline.
ideographic
The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline.  Currently unsupported; this will act like alphabetic.
bottom
The text baseline is the bottom of the bounding box.  This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.

The default value is alphabetic.

The following diagram demonstrates the various baselines supported by the textBaseline attribute, and is courtesy WHATWG.

The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square.

Methods

fillText()

Draws the specified text using the text style specified by the font attribute, the alignment specified by the textAlign attribute, and the baseline specified by textBaseline.  The text is filled using the current fillStyle, and the strokeStyle is ignored.

Note: This method was introduced with Gecko 1.9.1 (Firefox 3.5) and is part of the HTML 5 standard.
void fillText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
Parameters
textToDraw
The text to draw into the context.
x
The X coordinate at which to begin drawing.
y
The Y coordinate at which to begin drawing.
maxWidth
Optional; the maximum width to draw.  If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.
Example
ctx.fillText("Sample String", 10, 50);

measureText()

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

Note: This method was introduced with Gecko 1.9.1 (Firefox 3.5) and is part of the HTML 5 standard.
nsIDOMTextMetrics measureText(
  in DOMString textToMeasure
);
Parameters
textToMeasure
The string whose width in pixels is to be determined.
Return value

An nsIDOMTextMetrics object whose width attribute is set to the number of CSS pixels wide the string would be if drawn.

mozDrawText()

{{ deprecated_header() }}

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.

Note: This method has been deprecated in favor of the official HTML 5 methods fillText() and strokeText().
void mozDrawText(
   in DOMString textToDraw
);
Parameters
textToDraw
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()

{{ deprecated_header() }}

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

Note: This method has been deprecated in favor of the official HTML 5 method measureText().
float mozMeasureText(
  in DOMString textToMeasure
);
Parameters
textToMeasure
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((width - 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
textToPath
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
textToDraw
The text to draw along the specified path.
stroke
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.

strokeText()

Strokes the specified text using the text style specified by the font attribute, the alignment specified by the textAlign attribute, and the baseline specified by textBaseline.  The current strokeStyle is used when stroking the text.

Note: This method was introduced with Gecko 1.9.1 (Firefox 3.5) and is part of the HTML 5 standard.
void strokeText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
Parameters
textToDraw
The text to draw into the context.
x
The X coordinate at which to begin drawing.
y
The Y coordinate at which to begin drawing.
maxWidth
Optional; the maximum width to draw.  If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.
Example
ctx.strokeText("Sample String", 10, 50);

Remarks

  • See the WHATWG specification for HTML 5 canvas text.
  • You do not need a special context to use these; the 2D context works just fine.
  • All drawing is done using the current transform.

Additional examples

{{ languages( { "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }}

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1+ 3.5+ 9.0 10.5 4.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatUnknown() }} 9.0 11.0 3.2

Revision Source

<p>{{ Gecko_minversion_header(1.9) }}</p>
<p>The <code><a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas</a></code> element supports text drawn in it using both <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#text-0" title="http://www.whatwg.org/specs/web-apps/current-work/#text">standard HTML 5 features</a> and a few experimental Mozilla methods and properties.</p>
<p>The text can be comprised of any Unicode characters, including even those out of the Basic Multilingual Plane.</p>
<p>{{ fx_minversion_note("3.5", "In Firefox 3.5 and later, any configured <a class="internal" href="/en/Canvas_tutorial/Applying_styles_and_colors#Shadows" title="En/Canvas tutorial/Applying styles and colors#Shadows">shadow effects</a> are applied to text when drawn.") }}</p>
<h2 id="Method_overview" name="Method_overview">Method overview</h2>
<table class="standard-table"> <tbody> <tr> <td><code>void <a class="internal" href="/en/Drawing_text_using_a_canvas#fillText()" title="en/Drawing text using a canvas#fillText()">fillText</a>(in <a class="internal" href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a> text, in float x, in float y, [optional] in float maxWidth);</code> {{ gecko_minversion_inline("1.9.1") }}</td> </tr> <tr> <td><a class="internal" href="/nsIDOMTextMetrics" title="nsIDOMTextMetrics"><span style="font-family: monospace;">nsIDOMTextMetrics</span></a><code> <a class="internal" href="/en/Drawing_text_using_a_canvas#measureText()" title="en/Drawing text using a canvas#measureText()">measureText</a>(in DOMString textToMeasure);</code> {{ gecko_minversion_inline("1.9.1") }}</td> </tr> <tr> <td><code>void <a href="#mozDrawText.28.29">mozDrawText</a>(in DOMString textToDraw); {{ deprecated_inline() }}</code></td> </tr> <tr> <td><code>float <a href="#mozMeasureText.28.29">mozMeasureText</a>(in DOMString textToMeasure);</code><code> {{ deprecated_inline() }}</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> <tr> <td><code>void <a class="internal" href="/en/Drawing_text_using_a_canvas#strokeText()" title="en/Drawing text using a canvas#strokeText()">strokeText</a>(in DOMString text, in float x, in float y, [optional] in float maxWidth);</code> {{ gecko_minversion_inline("1.9.1") }}</td> </tr> </tbody>
</table>
<p> </p>
<h2 id="Attributes" 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>font</code> {{ gecko_minversion_inline("1.9.1") }}</td> <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td> <td> <p>The current text style being used when drawing text. This string uses the same syntax as the <a href="/en/CSS/font" title="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 10px sans-serif.</p> <p>For example:</p> <pre class="eval">ctx.font = "20pt Arial";</pre> </td> </tr> <tr> <td><code>mozTextStyle</code> {{ deprecated_inline() }}</td> <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td> <td> <p>Deprecated in favor of the HTML 5 <code>font</code> attribute described above.</p> </td> </tr> <tr> <td><code>textAlign</code> {{ gecko_minversion_inline("1.9.1") }}</td> <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td> <td> <p>The current text alignment being used when drawing text.  Possible values:</p> <dl> <dt>left</dt> <dd>The text is left-aligned.</dd> <dt>right</dt> <dd>The text is right-aligned.</dd> <dt>center</dt> <dd>The text is centered.</dd> <dt>start</dt> <dd>The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).</dd> <dt>end</dt> <dd>The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).</dd> </dl> <p>The default value is <code>start</code>.</p> </td> </tr> <tr> <td><code>textBaseline</code> {{ gecko_minversion_inline("1.9.1") }}</td> <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td> <td> <p>The current text baseline being used when drawing text.  Possible values:</p> <dl> <dt>top</dt> <dd>The text baseline is the top of the em square.</dd> <dt>hanging</dt> <dd>The text baseline is the hanging baseline.  <em>Currently unsupported; this will act like <strong>alphabetic</strong>.</em></dd> <dt>middle</dt> <dd>The text baseline is the middle of the em square.</dd> <dt>alphabetic</dt> <dd>The text baseline is the normal alphabetic baseline.</dd> <dt>ideographic</dt> <dd>The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline.  <em>Currently unsupported; this will act like <strong>alphabetic</strong>.</em></dd> <dt>bottom</dt> <dd>The text baseline is the bottom of the bounding box.  This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.</dd> </dl> <p>The default value is <code>alphabetic</code>.</p> </td> </tr> </tbody>
</table>
<p>The following diagram demonstrates the various baselines supported by the textBaseline attribute, and is courtesy <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a>.</p>
<p><img alt="The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
<h2 id="Methods" name="Methods">Methods</h2>
<h3 id="fillText()">fillText()</h3>
<p>Draws the specified text using the text style specified by the <code>font</code> attribute, the alignment specified by the <code>textAlign</code> attribute, and the baseline specified by <code>textBaseline</code>.  The text is filled using the current <code>fillStyle</code>, and the <code>strokeStyle</code> is ignored.</p>
<div class="note"><strong>Note:</strong> This method was introduced with Gecko 1.9.1 (Firefox 3.5) and is part of the HTML 5 standard.</div>
<pre>void fillText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
</pre>
<h5 id="Parameters">Parameters</h5>
<dl> <dt><code>textToDraw</code></dt> <dd>The text to draw into the context.</dd> <dt><code>x</code></dt> <dd>The X coordinate at which to begin drawing.</dd> <dt><code>y</code></dt> <dd>The Y coordinate at which to begin drawing.</dd> <dt><code>maxWidth</code></dt> <dd>Optional; the maximum width to draw.  If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.</dd>
</dl>
<h5 id="Example">Example</h5>
<pre class="brush: js">ctx.fillText("Sample String", 10, 50);
</pre>
<h3 id="mozMeasureText.28.29" name="mozMeasureText.28.29">measureText()</h3>
<p>Returns an object containing the width, in pixels, that the specified text will be when drawn in the current text style.</p>
<div class="note"><strong>Note:</strong> This method was introduced with Gecko 1.9.1 (Firefox 3.5) and is part of the HTML 5 standard.</div>
<pre class="eval">nsIDOMTextMetrics measureText(
  in DOMString textToMeasure
);
</pre>
<h6 id="Parameters_2" name="Parameters_2">Parameters</h6>
<dl> <dt><code>textToMeasure</code></dt> <dd>The string whose width in pixels is to be determined.</dd>
</dl>
<h6 id="Return_value" name="Return_value">Return value</h6>
<p>An <a class="internal" href="/nsIDOMTextMetrics" title="nsIDOMTextMetrics"><code>nsIDOMTextMetrics</code></a> object whose <code>width</code> attribute is set to the number of CSS pixels wide the string would be if drawn.</p><h3 id="mozDrawText.28.29" name="mozDrawText.28.29">mozDrawText()</h3>
<p>{{ deprecated_header() }}</p>
<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>
<div class="note"><strong>Note:</strong> This method has been deprecated in favor of the official HTML 5 methods <code>fillText()</code> and <code>strokeText()</code>.</div>
<pre class="eval">void mozDrawText(
   in DOMString textToDraw
);
</pre>
<h6 id="Parameters" name="Parameters">Parameters</h6>
<dl> <dt><code>textToDraw</code></dt> <dd>The text to draw into the context.</dd>
</dl>
<h6 id="Example" name="Example">Example</h6>
<pre class="brush: js">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 id="mozMeasureText.28.29" name="mozMeasureText.28.29">mozMeasureText()</h3>
<p>{{ deprecated_header() }}</p>
<p>Returns the width, in pixels, that the specified text will be when drawn in the current text style.</p>
<div class="note"><strong>Note:</strong> This method has been deprecated in favor of the official HTML 5 method <code>measureText()</code>.</div>
<pre class="eval">float mozMeasureText(
  in DOMString textToMeasure
);
</pre>
<h6 id="Parameters_2" name="Parameters_2">Parameters</h6>
<dl> <dt><code>textToMeasure</code></dt> <dd>The string whose width in pixels is to be determined.</dd>
</dl>
<h6 id="Return_value" name="Return_value">Return value</h6>
<p>The width of the text in pixels.</p>
<h6 id="Example_2" name="Example_2">Example</h6>
<pre class="brush: js">var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate((width - 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 id="mozPathText.28.29" 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 id="Parameters_3" name="Parameters_3">Parameters</h6>
<dl> <dt><code>textToPath</code></dt> <dd>The text whose strokes are to be added to the current path.</dd>
</dl>
<h6 id="Example_3" name="Example_3">Example</h6>
<pre class="brush: js">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 id="mozTextAlongPath.28.29" 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 id="Parameters_4" name="Parameters_4">Parameters</h6>
<dl> <dt><code>textToDraw</code></dt> <dd>The text to draw along the specified path.</dd> <dt><code>stroke</code></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 id="Remarks" 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>
<h3 id="strokeText()">strokeText()</h3>
<p>Strokes the specified text using the text style specified by the <code>font</code> attribute, the alignment specified by the <code>textAlign</code> attribute, and the baseline specified by <code>textBaseline</code>.  The current <code>strokeStyle</code> is used when stroking the text.</p>
<div class="note"><strong>Note:</strong> This method was introduced with Gecko 1.9.1 (Firefox 3.5) and is part of the HTML 5 standard.</div>
<pre>void strokeText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
</pre>
<h5 id="Parameters">Parameters</h5>
<dl> <dt><code>textToDraw</code></dt> <dd>The text to draw into the context.</dd> <dt><code>x</code></dt> <dd>The X coordinate at which to begin drawing.</dd> <dt><code>y</code></dt> <dd>The Y coordinate at which to begin drawing.</dd> <dt><code>maxWidth</code></dt> <dd>Optional; the maximum width to draw.  If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.</dd>
</dl>
<h5 id="Example">Example</h5>
<pre class="brush: js">ctx.strokeText("Sample String", 10, 50);
</pre>
<h2 id="Remarks_2" name="Remarks_2">Remarks</h2>
<ul> <li>See the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#text" title="http://www.whatwg.org/specs/web-apps/current-work/#text">WHATWG specification</a> for HTML 5 canvas text.</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>
</ul>
<h2 id="Additional_examples" name="Additional_examples">Additional examples</h2>
<ul> <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">Stroking text around paths</a></li> <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">Drawing along a path</a></li> <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">Animating text moving around a circle</a>.</li>
</ul>
<p>{{ languages( { "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }}</p>
<h3 id="Compatibility">Compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>1+</td> <td>3.5+</td> <td>9.0</td> <td>10.5</td> <td>4.0</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>2.1</td> <td>{{ CompatUnknown() }}</td> <td>9.0</td> <td>11.0</td> <td>3.2</td> </tr> </tbody> </table> </div>
</div>
Revert to this revision