Insertar texto en un Canvas de HTML5

11/Jul/2012 HTML5 , , 3 Comentarios

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 y mediante Javascript accedemos a su contexto.

  1. <canvas height="300px" width="300px" id="micanvas">
  2. Su navegador no soporta en elemento CANVAS</canvas>
  3.  
  4. var canvas = document.getElementById("micanvas");
  5. var ctx = canvas.getContext("2d");
  6. </script>

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:

  1. 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.

  1. 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?

3 comentarios en “Insertar texto en un Canvas de HTML5”

Víctor Cuervo

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.

Víctor Cuervo

OSWALDO FAUSTO CHUMBIAUCA BELLIDO

SINCERAMENTE NO ES MUY TRASPARENTE LA PUBLICACIÓN O CONSEJOS.EL PÚBLICO NO QUIERE VER UNA SÁBANA DE LETRAS QUIERE VER EJEMPLOS DE CÓMO SE HACE EN TEXTO E IMÁGENES SON PÉSIMAS LA DIAGRAMACIÓN DE ESTE PROGRAMA.NO TIENE NADA DE DIDÁCTICA.SOLO LETRAS Y PURO PALABREO..

Víctor Cuervo

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.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*