javascript

Agregar texto a canvas – JavaScript y HTML5

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/

Entradas recientes

Cancelar trabajo de impresión con C++

En este post te quiero compartir un código de C++ para listar y cancelar trabajos…

1 día hace

Copiar bytes de Golang a JavaScript con WebAssembly

Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…

4 semanas hace

Imprimir PDF con Ghostscript en Windows de manera programada

Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…

4 semanas hace

Hacer pruebas en impresora térmica Bluetooth Android

Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…

1 mes hace

Limpiar clave PEM

Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…

1 mes hace

Foco con Telegram, apagador de 3 vías, relevador y ESP8266

Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…

2 meses hace

Esta web usa cookies.