Text in HTML 5 Canvas and demo

The Canvas tag allows text to be written with an effect of relief and filling with a pattern.

Here for example is how looks a text in Canvas, created with the online tool Logo Maker which is provided on this sit):

Text in Canvas
Demonstration with Logo Maker

Two methods are defined to write a text in this graphical space and they work as geometric shapes:

strokeText(texte, x, y)
Displays the contour of the text. The color depends on the strokeStyle method.
fillText(texte, x, y)
Displays a plain text. The color depends on the fillstyle method.

Some examples to check the implementation

Two texts are displayed below, with a Canvas tag:

Not supported!

HTML code: 

<canvas id="c1" width="400" height="100">
</canvas>

JavaScript code: 

function canvasFun() {
  var canvas = document.getElementById('c1');
  if (canvas.getContext){    
    var ctx = canvas.getContext('2d'); 
    ctx.font = "20pt Calibri,Geneva,Arial";
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.fillStyle = "rgb(0,20,180)";
    ctx.strokeText("Sample string", 10, 20);
    ctx.fillText("Another example", 10, 60);
  }  
}
window.onload=canvasFun;

The text size is given by the method font.
The first string is written in an empty style with the function strokeText, the second in a plain drawing with the function fillText.

Tools

SVG text tag, demos