Siguiendo con los tutoriales sobre el elemento canvas de HTML5 en este post vamos a ver cómo escribir texto sobre el canvas, o mejor dicho, dibujar texto sobre el canvas.

Vamos a personalizar la fuente y el color, así como las coordenadas en donde el texto comienza.

Los métodos que veremos son strokeText y fillText.

Función strokeText y fillText

Estas funciones tienen la misma sintaxis, y reciben los siguientes argumentos en el orden que aparecen:

  • El texto, como cadena
  • Coordenada x
  • Coordenada y

La diferencia entre strokeText y fillText es que strokeText dibuja solo el borde del texto, y fillText lo dibuja relleno.

Colores y fuentes

Para controlar el color del texto que se dibuja sobre el canvas de HTML se establece la propiedad strokeStyle y fillStyle en el nombre de un color o su valor hexadecimal, entre otros.

La fuente se establece con font,  y es algo como: “20px Arial”

Ejemplo de texto en Canvas

Veamos el código a continuación, el cual escribe texto sobre el canvas.

El resultado es el siguiente:

Dibujar texto en Canvas de HTML5 usando fillText y strokeText

Puedes probar el ejemplo aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 623 suscriptores

Relacionado:  Python: imprimir texto con color

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: