Skip to main content

Visit Mozilla.org

Drawing text using a canvas

From MDC

Introduced in Gecko 1.9

This article covers features introduced in Firefox 3

The <canvas> element supports drawing text on it via experimental Mozilla-specific APIs.

Contents

[edit] 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);

[edit] 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";

[edit] Methods

[edit] 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
);
[edit] Parameters
textToDraw
The text to draw into the context.
[edit] 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.

[edit] mozMeasureText()

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

float mozMeasureText(
  in DOMString textToMeasure
);
[edit] Parameters
textToMeasure
The string whose width in pixels is to be determined.
[edit] Return value

The width of the text in pixels.

[edit] 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.

[edit] 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
);
[edit] Parameters
textToPath
The text whose strokes are to be added to the current path.
[edit] 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.

[edit] mozTextAlongPath()

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

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
[edit] 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.
[edit] 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.

[edit] 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 bug 339553 if you'd like to read up on the implementation specifics.

[edit] Additional examples

Retrieved from "http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas"