Texto en el canvas

Poner texto en el canvas es también una operación de dibujar, solo que ahora no es una forma regular como rectángulos y arcos o polígonos irregulares a mano alzada, sino letras. Es tan fácil como dibujar cualquier figura básica:

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var papel = document.getElementById("mipanel");

var lapiz = papel.getContext("2d");

lapiz.font = "italic 60px Arial";

lapiz.strokeStyle = "#40f0f0";

lapiz.strokeText("Aquí estoy ya",10,50);

</script>

La nuevo a la hora de dibujar texto es determinar la propiedades de la fuente usada: estilo, tamaño y fuente. El método de dibujar es similar al usado para dibujar formas . En este ejemplo ves que se dibuja el contorno del texto. No va relleno.

Fíjate la forma de definir el tipo e letra una lista de valores separadas por espacio: estilo tamaño familia. Procura mantener ese orden.

 

Texto relleno

El texto no es más que un trazo cerrado con forma de letras y como cualquier otro dibujo en el canvas puede rellenarse con un color o con un diseño o con un gradiente. Para ello se usa el método filText del objeto lapiz. El estilo de diseño se controla con las propiedades de relleno.

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var papel = document.getElementById("mipanel");

var lapiz = papel.getContext("2d");

lapiz.font = "italic 60px Arial";

lapiz.fillStyle = "RGBA(0, 0, 252, 0.3)";

lapiz.fillText("Aquí estoy rellenito",10,50);

</script>

En esta ocasión el color lo codificamos con otro método, se trata de RGBA(Rojo, Verde, Azul, Opacidad), otra forma de describir el color (CSS3). Prueba a cambiar la opacidad para comprobar el efecto.