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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Texto en Canvas</title>
</head>
<body>
<h1>Texto en Canvas usando JavaScript</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br/>
<canvas id="canvas"></canvas>
<script src="script.js">
</script>
</body>
</html>/**
* Ejercicios con Canvas y JavaScript: texto
*
* https://parzibyte.me/blog
*/
const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Establecer tamaño y fuente
contexto.font = "30px Verdana";
// Sintaxis: text, x, y
contexto.strokeText("strokeText", 0, 50);
contexto.fillText("fillText", 0, 100);
// Se puede cambiar durante la ejecución
contexto.strokeStyle = "red";
contexto.strokeText("strokeText rojo", 170, 50);
contexto.font = "20px Courier New";
contexto.fillStyle = "yellow";
contexto.fillText("fillText amarillo", 120, 100);El resultado es el siguiente:
