Artículos
HTML5

Insertar texto en un Canvas de HTML5

11/Jul/2012

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?

Código Fuente

Descárgate el código fuente de Insertar texto en un Canvas de HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios