
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?
Felix
Gracias por tu pedagogía.
Víctor Cuervo
Muchas gracias por tu comentario. Es muy de agradecer.
Saludos.
Sofi
hola me gustaría saber como utilizar una fuente local del servidor para escribir el texto en un lienzo canvas. Te agradecería si me puedes dar alguna idea. Ya que he añadido la fuente, pero no la reconoce. A veces si, creo que el problema esta en esperar que la fuente se cargue. y como no la reconoce el texto no esta con la fuente solicitada.
Palc
¿ por qué si mezclo texto e imágenes, el texto automáticamente ocupa el fondo ?, es decir, estoy intentando trabajar con canvas, necesito colocar varias imágenes (jpg, png), también necesito colocar diversos textos, pero …
1. Depende del navegador muestra las imágenes en diferentes posiciones, es decir, unas al frente y otra atrás.
2. El texto siempre es colocado al fondo, esto muchas veces impide que se vea si las imágenes están en la misma posición.
Si cambio la propiedad ctx.globalCompositeOperation = «destination-over»; todo el texto pasa al frente, el problema, es que si coloco sobras estas también pasan al frente.
Saludos.