Canvas HTML5: texto con fillText y strokeText

       Volvemos a hablar del elemento canvas de HTML5, al que ya hemos dedicado varias entradas. Ya hemos visto como dibujar figuras sencillas, hacer animaciones y transformaciones a estas figuras y cómo decidir la forma en que se calculan los espacios donde se junta más de un elemento de dibujo. En esta entrada vamos a hablar de poner texto en un canvas.

       El texto que pongamos en un canvas no será tan fácilmente reconocido por un buscador como si fuera texto de verdad. Lo podemos asemejar a usar una imagen, por lo que no hay que abusar. Está bien para un título, un banner o un logo, pero no debemos usarlo para el texto general de la página. Se puede hacer texto bastante bonito usando text-shadow y hay un api más moderno (font feature settings), que ya implementan la mitad de navegadores y de la que hablaremos otro día. Entonces ¿para qué poner un texto en un canvas? Pues para animarlo. Puedes dibujar un logo, pero no tiene sentido dibujarlo en el navegador pudiendo ser una imagen. Así que la mayor ventaja es poder animar el texto. Seguro que hemos visto muchos banners en flash donde el texto de “reserva ahora”, “ahorra”, “solo en marzo” se hace más grande mientras se mueve la imagen, esto se podría hacer con un canvas sin usar flash, algo hacia lo que parece que se dirige la web.

       Para dibujar texto en canvas lo hacemos de forma muy similar al resto de formas, es decir, primero elegiremos ancho, fuente o color, y después dibujaremos el texto en una cierta posición, con una función para dibujar solo el contorno y otra para dibujar relleno.

       Hay colores diferenciados para contorno y relleno:

ctx.strokeStyle='#369';
ctx.fillStyle="#48A";

       La fuente se elige con la propiedad font:

ctx.font="40pt Verdana";

       Es una declaración CSS, podemos usar fuentes personalizadas si hemos cargado esas fuentes y las hemos declarado en el CSS. Cada cambio que hagamos (color, fuente) afecta a lo que dibujemos después. Así pues dibujar un texto, solo contorno, y otro debajo, solo relleno sería:

ctx.font="40pt Verdana";
ctx.lineWidth='3';
ctx.strokeStyle='#369';
ctx.fillStyle="#48A";
ctx.fillText("Texto relleno",20,160);
ctx.strokeText("Texto l\u00ednea",20,80);

       La función acepta como primer parámetro la cadena de texto a dibujar. Es texto javascript, así que por eso la tilde de línea la ponemos con un \u00ed al igual que lo haríamos en un alert. El segundo y tercer parámetros es el desplazamiento x e y donde comenzar a dibujar. Así con la función fillText dibujamos un texto relleno y encima de este, con strokeText, dibujamos el contorno de otro texto.

       Si queremos que el mismo texto tenga contorno y relleno (es decir un color, y borde diferenciado) tenemos que dibujar con los dos métodos en la misma posición, es decir misma x y misma y. Código y ejemplo con los 3 dibujos, solo contorno, solo relleno y contorno y relleno:

ctx.font="40pt Verdana";
ctx.lineWidth='3';
ctx.strokeStyle='#369';
ctx.fillStyle="#48A";
ctx.fillText("Texto relleno",20,160);
ctx.strokeText("Texto l\u00ednea",20,80);

ctx.font="30pt Verdana";
ctx.lineWidth='1';
ctx.strokeStyle='#0FF';
ctx.fillStyle="#48A";
ctx.fillText("Texto relleno con borde",20,250);
ctx.strokeText("Texto relleno con borde",20,250);



       Está implementado en casi todos los navegadores que soportan canvas, aunque con alguna versión de diferencia, está ampliamente soportado por navegadores actuales: IE9+, Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10.5+ IOS, Android, Blackberry,...