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>
Prueba este código
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.
Por defecto el texto se dibuja hueco, solo aparece el contorno de las letras
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>
Prueba este código
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.
Un contorno como cualquiere tramo cerrado puede rellenarse
