Línea de Código
Aprende a Programar

En varios ejemplos del uso del Canvas en HTML5 hemos ido viendo como insertar diferentes elementos gráficos: líneas, rectángulos,… Pero a la hora de utilizar el Canvas en HTML5 no nos vamos a limitar a realizar dibujos, si no que también podemos insertar texto. Así que vamos a ver qué código necesitamos para insertar texto en un Canvas de HTML5.

La creación y acceso al Canvas seguro que ya os la sabéis, pero por si acaso la volvemos a poner. Creamos el elemento Canvas:

<canvas height="300px" width="300px" id="micanvas">
Su navegador no soporta en elemento CANVAS
</canvas>

Y mediante Javascript accedemos a su contexto.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

Ahora que tenemos el contexto del canvas vamos a insertar el texto. Para insertar texto tenemos que conocer dos cosas. La primera es saber cómo podemos seleccionar la fuente, tamaño, efectos sobre el texto. Y es que aquí no podemos pensar en propiedades CSS, si no que será un atributo del Canvas con el que modifiquemos el tipo del texto. El atributo del canvas que nos permite dar formato al texto es .font. Eso sí, los valores de la propiedad son similares a los valores de CSS.

Si queremos utilizar una letra sans-serif de 22px y que esté en negrita pondremos lo siguiente:

ctx.font = "bold 22px sans-serif";

Ahora ya solo hay que conocer la segunda cosa. Cómo ponemos el texto. Esto lo hacemos con el método .fillText. Este método recibe tres parámetros: el primero será el texto que queremos insertar y los dos siguientes será la coordenada a partir de la cual queremos insertar el texto.

ctx.fillText("Texto en el Canvas",50,50);

Ya tenemos insertado nuestro texto en un Canvas con HTML5.

¿Cómo aplicarías efectos sobre este texto?

Publicaciones relacionadas:

Eje de coordenadas en Canvas HTML5 Modificando propiedades CSS con un Slider Dibujar un rectángulo en un Canvas con HTML5 Limpiar contenido de un Canvas en HTML5 Descargar un Canvas a una imagen con HTML5