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:
Puedes probar el ejemplo aquí.
