El elemento <canvas> es una poderosa herramienta en HTML5 que nos permite crear gráficos y animaciones directamente en el navegador, proporcionando un área de dibujo donde podemos representar gráficos en 2D y 3D sin necesidad de plugins adicionales. Este capítulo introduce los conceptos básicos del Canvas y explica cómo configurarlo en un documento HTML, para que podamos comenzar a construir un juego simple.

¿Qué es el elemento <canvas>?

El elemento <canvas> actúa como un lienzo en blanco sobre el que podemos dibujar usando JavaScript. Es una característica central de HTML5 que permite crear y manipular gráficos, y es muy utilizado en el desarrollo de juegos, gráficos de datos, e incluso animaciones interactivas en la web.

Al ser simplemente un contenedor, <canvas> no tiene contenido visual hasta que nosotros lo dibujemos mediante JavaScript. Este lienzo, o "canvas", es completamente manipulable mediante su API de JavaScript, lo que abre muchas posibilidades para desarrolladores.

Configuración del Canvas en HTML

El primer paso para usar <canvas> es incluirlo en nuestro HTML y definir sus dimensiones. A continuación, se muestra un ejemplo básico de HTML con un canvas:

html

En este código, hemos creado un elemento <canvas> con un id llamado gameCanvas. Los atributos width y height representan el tamaño en píxeles del canvas y determinan la resolución del área de dibujo. Si omitimos estos atributos, el canvas se establece en su tamaño predeterminado de 300px de ancho por 150px de alto.

Estilo del Canvas con CSS

Aunque las dimensiones del canvas se establecen en HTML, podemos añadir estilos adicionales con CSS, como el color del borde o su posición en la página. Aquí tienes un ejemplo:

css

Estos estilos CSS ayudan a que el canvas se vea más definido en nuestra página y facilitan su ubicación visual.

Acceso al Contexto 2D

Para dibujar en el canvas, necesitamos obtener su contexto 2D. El contexto es un objeto JavaScript que contiene todas las herramientas y métodos para dibujar formas, líneas, colores, y más. El siguiente código muestra cómo acceder al contexto 2D:

javascript

Este contexto 2D nos ofrece un conjunto completo de métodos para crear gráficos, incluyendo la capacidad de dibujar formas, aplicar colores, y gestionar estilos.

Dibujando Formas Básicas en el Canvas

Una de las primeras cosas que podemos hacer en el canvas es dibujar formas básicas. Comenzaremos con rectángulos, una de las formas más simples. Para ello, usaremos el método fillRect:

javascript

Aquí, el método fillRect dibuja un rectángulo relleno, comenzando en las coordenadas (50, 50). Usamos fillStyle para especificar el color de relleno. Esta será una forma clave en nuestro juego, ya que nos permitirá construir elementos visuales, como obstáculos o plataformas.

Dibujando Bordes en Formas con strokeRect

Además de los rectángulos rellenos, podemos dibujar rectángulos con solo un borde usando el método strokeRect. A continuación, un ejemplo:

javascript

Este código dibuja un rectángulo con borde verde, sin relleno. Podemos utilizar esto para crear delimitadores en nuestro juego.

Limpiando el Canvas

Es fundamental aprender a limpiar el canvas, especialmente cuando se actualiza con nuevos gráficos en cada cuadro de una animación. Usaremos el método clearRect para borrar una sección específica del canvas o el canvas completo:

javascript

Esto es esencial para evitar que las figuras anteriores interfieran con las nuevas, lo cual es especialmente importante en los juegos.

Dibujando un Círculo

Para dibujar un círculo, necesitamos el método arc. Este método nos permite crear círculos y arcos en el canvas. Veamos cómo:

javascript

Este código dibuja un círculo rojo con un radio de 50 píxeles. Es importante usar beginPath y closePath para iniciar y cerrar cada forma, especialmente cuando combinamos múltiples formas.

Explorando las Coordenadas

El sistema de coordenadas en el canvas tiene su origen (0, 0) en la esquina superior izquierda. Esto es fundamental al diseñar un juego, ya que nos ayuda a posicionar los elementos en relación unos con otros.

Ejercicio: Configuración de Canvas y Primer Dibujo

Para practicar, intente crear un documento HTML con un elemento canvas y dibuje un círculo y un cuadrado en diferentes posiciones. Experimente con diferentes colores y tamaños para familiarizarse con el proceso de dibujo.

javascript

Resumen

En este capítulo, hemos introducido el elemento <canvas> y su contexto 2D, explorando cómo configurar su tamaño y dibujar formas básicas como rectángulos y círculos. Estas son las herramientas básicas con las que construiremos nuestro juego.

En el próximo capítulo, exploraremos colores avanzados y gradientes, lo que nos permitirá darle más vida a nuestros gráficos. ¡Continúa aprendiendo y pronto tendrás las habilidades para construir tu propio juego en el canvas!