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 sino letras.

Como siempre un ejemplor te mostrará como hacerlo:

<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: primero el estilo luego el tamaño y por último la familia. Procura mantener ese orden.

Texto relleno

Pero también podemos dibujar texto relleno con un color o con un diseño o un gradiente. Pa<ra 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 ya",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.

.