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