Tictac Soluciones Informáticas > Diseño web > Canvas HTML5: texto con fillText y strokeText

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
lu00ednea”,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
lu00ednea”,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);

.canvas5{
width: 500px;
height: 300px;
margin: 0 auto;
display:block;
border: 1px solid #000;
}

var ctx51 = document.getElementById(“canvas51”).getContext(“2d”);

ctx51.font=”40pt Verdana”;
ctx51.lineWidth=’3′;
ctx51.strokeStyle=’#369′;
ctx51.fillStyle=”#48A”;
ctx51.fillText(“Texto relleno”,20,160);
ctx51.strokeText(“Texto lu00ednea”,20,80);

ctx51.font=”30pt Verdana”;
ctx51.lineWidth=’1′;
ctx51.strokeStyle=’#0FF’;
ctx51.fillStyle=”#48A”;
ctx51.fillText(“Texto relleno con borde”,20,250);
ctx51.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,…
2018-07-02T17:34:36+00:0019/02/2013|Diseño web, HTML5|

2 Comments

  1. Starling De la Rosa 26/08/2014 en 17:49 - Responder

    ¡Me fue muy útil! Gracias amigo. Hubiera querido que sea un poco más extenso, pero así se explica muy bien, gracias.

  2. roimar urbano 21/04/2015 en 21:33 - Responder

    es posible colocarle una fuente personalizada a el canvas

Deje su comentario