HTML5: Text Rendering Overview

Here are some samples and brief explanation of HTML5 Canvas text related functions. A HTML5 compliant browser (such as Firefox 3.5) is required in order for the examples to work.

Basic Text

Use strokeText or fillText, both takes x, y and maximumWidth. The colors are determined by the fillStyle and strokeStyle

<script language="JavaScript">
function testDrawText(canvas)
{
  var context=canvas.getContext('2d');
  context.lineWidth=1;
  context.fillStyle="#ff0000";
  context.lineStyle="#ffff00";
  context.font="20px sans-serif";
  context.fillText("Filled Text", 10, 10);
  context.font="32px sans-serif";
  context.strokeText("Stroked Text", 10, 60);

  context.font="italic 32px sans-serif";
  context.strokeText("Italic Stroked Text", 10, 90);
}
testDrawText(document.getElementById('canvas1'));
</script>

The thickness of the stroke can be set using context.lineWidth. The color of the fill can be set using context.fillStyle. context.fillStyle can also be set to gradient or pattern (see below). The color of the stroke can be set using context.lineStyle. The thickness of the stroke can be set using context.lineWidth.

Stroke and Fill

What if I want both the fill and the strokes? Draw the text twice, like below (notce also that I set the font to bold:

function testDrawText2(canvas)
{
  var context=canvas.getContext('2d');
  context.lineWidth=3;
  context.fillStyle="#ffff00";
  context.strokeStyle="rgba(255, 0, 0 , 1)";
  context.font="bold 42pt sans-serif";
  context.fillText("Filled Stroked Text", 10, 60);
  context.strokeText("Filled Stroked Text", 10, 60);
}

Shadow

Shadow can be added by using context.shadowOffsetX, context.shadowOffsetY, and context.shadowColor, and context.shadowBlur.

function testDrawText3(canvas)
{
  var context=canvas.getContext('2d');
  context.lineWidth=1;
  context.fillStyle="#0000ff";
  context.strokeStyle="#880000";
  context.font="bold 42pt sans-serif";
  context.shadowOffsetX=2;
  context.shadowOffsetY=-5;
  context.shadowColor="#888888";
  context.fillText("Shadowed Text", 10, 60);

  context.fillStyle="#ff0000";
  context.shadowOffsetX=5;
  context.shadowOffsetY=5;
  context.shadowBlur=10;
  context.font="bold 22pt sans-serif";
  context.fillText("Shadow Blurred, Stroked, Text", 10, 100);
  context.strokeText("Shadow Blurred, Stroked, Text", 10, 100);
}

Gradient

Gradient created using context.createLinearGradient() can be set as context.fillStyle.

function testDrawTextGradient(canvas)
{
  var  context=canvas.getContext('2d');
  var gradient=context.createLinearGradient(1, 1, 450, 1);
  gradient.addColorStop(0, '#ff0000');
  gradient.addColorStop(0.25, '#770000');
  gradient.addColorStop(0.5, '#777700');
  gradient.addColorStop(0.75, '#007777');
  gradient.addColorStop(1, '#0000ff');

  context.fillStyle=gradient;
  context.font="bold 42pt sans-serif";
  context.shadowOffsetX=5;
  context.shadowOffsetY=5;
  context.shadowBlur=10;
  context.fillText("Gradient Filled Text", 10, 60);

  context.fillStyle='#000000';
  context.strokeStyle=gradient;
  context.lineWidth=3;
  context.strokeText("Gradient Stroked Text", 10, 110);
}
testDrawTextGradient(document.getElementById('canvasGradient'));

Text On A Path (MOZILLA/FIREFOX BROWSER ONLY)

The text is below is drawn along a circle, using context.mozTextAlongPath.

function testDrawTextPathCircle(text, canvas)
{
  var context=canvas.getContext('2d');
  context.fillStyle="#000000";

  context.beginPath();
  context.arc(200,100, 80, 0, Math.PI*2, true);
  context.stroke();
  context.font="22pt sans-serif";
  context.mozTextAlongPath(text, false);
  context.closePath();
}
testDrawTextPathCircle('This text is drawn on a path.  I am making it really long.',   document.getElementById('canvasCirclePath'));

The text below is drawn following the path of some lines.

function testDrawTextPath(text, canvas)
{
  var context=canvas.getContext('2d');
  context.fillStyle="#ff0000";

  context.beginPath();
  context.moveTo(95,95);
  context.lineTo(500,300);
  context.lineTo(75,200);
  context.lineTo(95,95);
  context.stroke();
  context.font="22pt sans-serif";
  context.mozTextAlongPath(text, false);
  context.closePath();
}
testDrawTextPath('This text is drawn on a path.  I am making it really long so you can see it traveling along the path', document.getElementById('canvas0'));

You can change text style in the middle of a path. Here’s an example using bezier path. It is also not necessary to display the path.

function testDrawTextPath2(text, canvas)
{
  var context=canvas.getContext('2d');
  context.fillStyle="#ff0000";
  context.font="12pt sans-serif";

  context.beginPath();
  context.moveTo(5,50);
  context.bezierCurveTo(130,180, 120, 150, 300,50);
  context.stroke();
  context.mozTextAlongPath(text, false);

  context.fillStyle="#0000ff";
  context.font="22pt sans-serif";
  context.beginPath();
  context.moveTo(300,50);
  context.bezierCurveTo(450,10, 500, 250, 650, 150);
  context.mozTextAlongPath(text, false);
}
testDrawTextPath2('This text is drawn on a path.  I am making it really long so you can see it traveling along the path', document.getElementById('canvas0A'));

Filling Text With Image Pattern

This method uses an image (which can come from an Image may be NSFW.
Clik here to view. tag) as a pattern for the context.fillStyle. The context.createPattern(img, repeat) is used to create the pattern (the repeat value can be: ‘repeat’, ‘no-repeat’, ‘repeat-x’, ‘repeat-y’).

function drawPatternText(canvas, image, text)
{
  var context=canvas.getContext('2d');

  // Create the pattern, image can be an Image may be NSFW.
 Clik here to view. node.
  context.fillStyle=context.createPattern(image, 'repeat');

  // Same as other examples
  context.font="bold 42pt sans-serif";
  context.shadowOffsetX=5;
  context.shadowOffsetY=5;
  context.shadowBlur=10;
  context.fillText(text, 10, 50);
  context.strokeText(text, 10, 50);
}
Image may be NSFW.
 Clik here to view.

The image used is below: Image may be NSFW.
Clik here to view. You can also preload the images, eq: see the loadImages() function in http://www.permadi.com/tutorial/jsclock/index.html Other text functions, such as measurement, baseline, and alignment is on the API doc: http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#text