Mar
20
2010

 

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

[c]
<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>
[/c]


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:

[c]
<script language="JavaScript">
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);
}

testDrawText2(document.getElementById('canvas2'));
</script>
[/c]


 

Shadow

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



[c]
<script language="JavaScript">
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=-2;
  context.shadowColor="#888888";
  context.fillText("Shadowed Text", 10, 60);

  context.fillStyle="#ff0000";
  context.shadowOffsetX=5;
  context.shadowOffsetY=5;
  context.shadowBlur=10;
  context.fillText("Shadow Blurred, Stroked, Text", 10, 100);
  context.strokeText("Shadow Blurred, Stroked, Text", 10, 100);
}
testDrawText3(document.getElementById('canvas3'));
</script>[/c]

 

Gradient

 

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



 

Text On A Path

 

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



[c]
<script language="JavaScript">
function testDrawTextPathCircle(text, canvas)
{
  var context=canvas.getContext('2d');
  context.fillStyle="#ff0000";

  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'));
</script>
[/c]

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

[c]
<script language="JavaScript">
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'));
</script>
[/c]


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.

[c]
<script language="JavaScript">
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'));
</script>
[/c]


 

Filling Text With Image Pattern

 

This method uses an image (which can come from an <img> 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’).

[c]
<script language="JavaScript">
function drawPatternText(canvas, image, text)
{
  var context=canvas.getContext('2d');

  // Create the pattern, image can be an <img> 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);
}
</script>
<img id="myImage" src="/tutorial/webgraph2/images/tile01.jpg" onload="javascript:drawPatternText(document.getElementById('patternCanvas'), this, 'Pattern Text');">
[/c]


The image used is below:


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

One Response to “HTML5: Text Rendering Overview”

  1. [...] http://www.permadi.com/blog/2010/03/html5-text-rendering-overview/ [...]