Aprender a usar la etiqueta Canvas de HTML abre la puerta a crear mapas, personajes y elementos visuales directamente en el navegador con JavaScript. En el proyecto de los Moquepones, el siguiente paso es agregar un mapa interactivo donde las mascotas puedan moverse, y todo comienza por entender cómo funciona este poderoso elemento rectangular.
¿Cómo funciona el sistema de coordenadas en Canvas?
Canvas dibuja un espacio rectangular dentro de la página web donde podemos renderizar gráficos usando JavaScript. Para ubicar elementos dentro de ese espacio, se utiliza un sistema similar al plano cartesiano, pero con una diferencia importante [01:00].
El punto de origen (0, 0) se encuentra en la esquina superior izquierda del canvas. A partir de ahí:
- El eje X crece hacia la derecha.
- El eje Y crece hacia abajo.
- Solo se usan números positivos.
Por ejemplo, si queremos ubicar el punto (2, 1), nos movemos dos píxeles a la derecha y un píxel hacia abajo. Para el punto (4, 5), avanzamos cuatro píxeles en X y cinco píxeles en Y [01:38]. Con este sistema de coordenadas, Canvas permite dibujar líneas, círculos, rectángulos, texto e incluso incluir imágenes.
¿Cómo agregar un Canvas al proyecto con HTML y CSS?
El primer paso es crear una nueva sección en el archivo HTML con un section que contenga un título descriptivo y la etiqueta <canvas> con un ID único [02:24]. En este caso, el ID elegido es mapa.
Desde JavaScript, se obtienen las referencias al DOM usando document.getElementById para acceder tanto a la sección como al canvas [02:52]. Luego, se controla la visibilidad con la propiedad display:
- Al iniciar el juego, la sección del mapa se oculta con
display: none.
- Cuando corresponde mostrarla, se cambia a
display: flex.
Para los estilos CSS, se aplica flex-direction: column junto con align-items: center y justify-content: center para mantener los elementos centrados [04:28]. Un borde de dos píxeles sólido y blanco al canvas facilita visualizar sus límites durante el desarrollo.
¿Qué es el contexto 2D y cómo se obtiene?
Antes de poder dibujar, es necesario obtener el contexto de renderizado del canvas. Esto se logra con el método getContext('2d') [05:05], que retorna un objeto con todas las funciones de dibujo en dos dimensiones.
javascript
const mapa = document.getElementById('mapa')
const lienzo = mapa.getContext('2d')
La variable lienzo es la herramienta principal para crear formas y gráficos dentro del canvas.
¿Cómo dibujar rectángulos e imágenes en Canvas?
Con el contexto listo, la función fillRect permite crear rectángulos. Recibe cuatro parámetros: posición en X, posición en Y, ancho y alto [05:22].
javascript
lienzo.fillRect(5, 15, 20, 40)
Esto genera un rectángulo negro en la posición (5, 15) con 20 píxeles de ancho y 40 de alto.
Para cargar una imagen, se crea un nuevo objeto Image, se le asigna la propiedad src (source) con la ruta del archivo [05:58], y se usa el método drawImage en lugar de fillRect.
javascript
let imagenCapipepo = new Image()
imagenCapipepo.src = './assets/capipepo.png'
lienzo.drawImage(imagenCapipepo, 20, 40, 100, 100)
El método drawImage recibe cinco parámetros: la imagen, la posición X, la posición Y, el ancho y el alto deseados [06:14]. Con esto, el personaje Capipepo aparece renderizado directamente dentro del canvas.
¿Qué se logró en esta implementación?
En pocos pasos se completaron tres objetivos fundamentales:
- Crear el canvas en HTML con su sección y estilos correspondientes.
- Obtener el contexto 2D para habilitar las funciones de dibujo.
- Dibujar un rectángulo y una imagen usando
fillRect y drawImage.
El canvas por defecto se inicializa con 300 píxeles de ancho y 206 de alto [04:05], valores que pueden ajustarse según las necesidades del proyecto. Ahora que Capipepo ya vive dentro del mapa, el siguiente reto es lograr que se mueva. ¿Qué dirección le darías primero a tu mokepón?
