Writing in Rectangle - HTML Canvas

Question

I’m using the following code

var canvas = document.createElement("canvas");
canvas.width = 55;
canvas.height = 20;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);

var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
document.body.appendChild(img);

It generates a red 55x20 px rectangle. But I would like to put a text within this.

I tried to fillText(); but with no results.

Some help ?

http://jsfiddle.net/frvfyfbL/1/

Answer 1

Just add this after the ctx.fillRect:

ctx.fillRect(0, 0, 100, 100);
...
var message = "Mensagem"; //Define a mensagem
ctx.font = '9pt Arial'; //Define Tamanho e fonte
ctx.fillStyle = 'black'; //Define a cor
ctx.fillText(message, positionY, positionX); //Desenha a mensagem