Canvas - de Cero a Profesional

Trabajo con Texto y Imágenes

Cargar y dibujar imágenes en canvas.

Paso 1: Preparar el HTML y el Canvas

Primero, asegúrate de que tienes el elemento <canvas> en tu archivo HTML. Aquí tienes un ejemplo simple:

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Cargar Imágenes en Canvas</title>
</head>
<body>
    <canvas id="miCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Cargar y Dibujar la Imagen en JavaScript

Para cargar una imagen en el canvas, utilizaremos el objeto Image de JavaScript. Luego, dibujaremos esta imagen en el canvas utilizando el método drawImage() del contexto de dibujo 2D.

Crear y Cargar la Imagen

En tu archivo JavaScript (script.js), necesitarás crear un nuevo objeto Image y cargar una imagen en él. Aquí te muestro cómo hacerlo:

				
					var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');

// Crear una nueva instancia de Image
var imagen = new Image();

// Establecer la fuente de la imagen
imagen.src = 'ruta/a/tu/imagen.jpg';  // Asegúrate de usar una ruta válida

// Dibujar la imagen en el canvas cuando esté completamente cargada
imagen.onload = function() {
    ctx.drawImage(imagen, 0, 0);  // drawImage(imagen, x, y)
};

Método drawImage()

El método drawImage() puede ser utilizado de varias maneras, dependiendo de cuántos parámetros le pases:

  • drawImage(image, dx, dy): Dibuja la imagen en el canvas en la posición especificada por dx y dy.
  • drawImage(image, dx, dy, dWidth, dHeight): Además de posicionar la imagen, este método te permite escalar la imagen a las dimensiones especificadas por dWidth y dHeight.
  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): Este es el uso más completo, permitiendo cortar una parte específica de la imagen (definida por sx, sy, sWidth, sHeight) y luego dibujarla escalada en el canvas.

Ejemplo de Escalado y Recorte

Supongamos que deseas escalar la imagen a la mitad de su tamaño original y solo mostrar una sección de la misma:

				
					// Suponiendo que la imagen original tiene 800x600 píxeles
imagen.onload = function() {
    // Dibuja solo la parte superior izquierda de la imagen, escalada a la mitad de su tamaño
    ctx.drawImage(imagen, 0, 0, 400, 300, 50, 50, 200, 150);
};

Agregar y configurar texto (tamaño, fuente, color).

Agregar texto a un canvas es una funcionalidad muy útil, especialmente cuando se necesita etiquetar partes de un gráfico, añadir títulos, o simplemente incorporar cualquier mensaje textual directamente en tus gráficos. Aquí te mostraré cómo configurar y personalizar el texto en HTML5 Canvas, cubriendo el tamaño, la fuente y el color.

Paso 1: Preparación del Canvas

Primero, asegúrate de tener tu elemento <canvas> definido en tu archivo HTML, similar al ejemplo que hemos utilizado en las lecciones anteriores:

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Texto en Canvas</title>
</head>
<body>
    <canvas id="miCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Configurar y Dibujar Texto en JavaScript

En tu archivo JavaScript (script.js), vamos a configurar y dibujar texto utilizando varias propiedades y métodos del contexto de dibujo 2D.

Configuración Básica de Texto

Para añadir texto, utilizaremos principalmente tres propiedades del contexto:

  • font: Define el estilo del texto, incluyendo tamaño y tipo de fuente.
  • fillStyle: Establece el color del texto.
  • textAlign: Alinea el texto horizontalmente respecto a las coordenadas proporcionadas.

Aquí tienes un ejemplo básico de cómo configurar y dibujar texto:

				
					var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');

// Configurando el estilo del texto
ctx.font = '24px Arial';  // Tamaño de 24 píxeles, fuente Arial
ctx.fillStyle = 'blue';   // Color azul
ctx.textAlign = 'center'; // Alineación central

// Dibujando el texto en el canvas
ctx.fillText('Hola, Canvas!', canvas.width / 2, 100);  // Texto centrado en la parte superior

Métodos para Dibujar Texto

  • fillText(text, x, y): Dibuja el texto lleno con el color especificado en fillStyle.
  • strokeText(text, x, y): Dibuja solo el contorno del texto con el color especificado en strokeStyle.

Si quieres añadir un contorno al texto, también podrías configurar strokeStyle y usar strokeText():

				
					ctx.strokeStyle = 'red';  // Color del contorno
ctx.lineWidth = 1;        // Ancho de la línea del contorno
ctx.strokeText('Hola, Canvas!', canvas.width / 2, 100); // Texto con contorno

Personalización Avanzada

Además del tamaño y la fuente, puedes experimentar con otras propiedades para ajustar la apariencia del texto:

  • textBaseline: Controla la alineación vertical del texto (opciones como ‘top’, ‘hanging’, ‘middle’, ‘alphabetic’, ‘ideographic’, ‘bottom’).
  • lineWidth: Ajusta el ancho de la línea cuando se utiliza strokeText.

Recursos