Agregar texto a canvas – JavaScript y HTML5

Dibujar texto en Canvas de HTML5 usando fillText y strokeText

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.

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/