Agregar texto a canvas – JavaScript y HTML5

Dejar un comentario / HTML, javascript, web / Por

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:

Dibujar texto en Canvas de HTML5 usando fillText y strokeText

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

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