Text in Canvas from HTML 5

The Canvas tag allows you to write embossed text and fill it with a pattern.

For example, here's what the text in Canvas might look like, according to an example created using the online Logo Maker tool featured on this site:

Text dans Canvas
Demo with Maker logo

There are two methods defined for writing text in this graphics area, and they work as geometric shapes:

strokeText (text, x, y
)
Displays the text stroke. The color depends on the strokeStyle method.
fillText (text, x, y
)
Displays the full text. The color depends on the fillStyle method.

A few examples of implementation validation

Below are two texts in the Canvas tag thanks to the following JavaScript code:

Unrecognized!

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("Exemple de texte", 10, 20);
    ctx.fillText("Autre exemple", 10, 60);
  }  
}
window.onload=canvasFun;

The size of the text is specified by the fais method.
The first sentence is written with an empty outline with the strokeText function, the second with a full-text outline combined with the fillText function.

Toolbox

SVG Text, Demonstrations