Crea una aplicación web de tablero de dibujo con HTML5 Canvas

Introducción

En este proyecto, crearemos paso a paso una aplicación de tablero de dibujo basada en la web. Cada paso se construirá sobre el anterior, lo que te permitirá agregar funcionalidad a la aplicación gradualmente. Al final de este proyecto, tendrás un tablero de dibujo completamente funcional donde los usuarios podrán dibujar, cambiar el color del pincel, ajustar el tamaño del pincel y limpiar el lienzo.

👀 Vista previa

demo del tablero de dibujo

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar la estructura HTML para una aplicación web de tablero de dibujo.
Cómo crear y obtener el contexto de representación 2D de un elemento HTML <canvas>.
Cómo implementar oyentes de eventos para rastrear las acciones del mouse para dibujar.
Cómo agregar un botón "Limpiar" e implementar la funcionalidad para limpiar el lienzo.
Cómo crear un campo de entrada para selección de color e implementar la funcionalidad para cambiar el color del pincel.
Cómo agregar un campo de entrada de rango para ajustar el tamaño del pincel e implementar la funcionalidad.

🏆 Logros

Después de completar este proyecto, podrás:

Crear una estructura básica de página web usando HTML.
Usar oyentes de eventos de JavaScript para manejar las interacciones del usuario.
Trabajar con elementos HTML <canvas> para dibujar.
Dar estilo a una aplicación web usando CSS.
Combinar HTML, CSS y JavaScript para construir un tablero de dibujo funcional.

Crear la estructura HTML

Requisitos:

Abre el archivo index.html.
Configura la estructura básica de HTML en index.html con un lienzo, un encabezado y elementos de control.

Funcionalidad:

Se crearán los archivos del proyecto y la estructura básica de HTML, pero aún no habrá funcionalidad de dibujo.

Pasos:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Drawing Board</title>
  </head>
  <body>
    <header>
      <h1>Drawing Board</h1>
    </header>
    <div class="container">
      <div class="controls">
        <input type="color" id="color-picker" value="#000000" />
        <label for="brush-size">Tamaño del pincel:</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">Limpiar</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Agregar el lienzo

Requisitos:

En index.html, agrega un elemento <canvas> con un ID de "whiteboard" y dimensiones (ancho y alto) de tu elección.

Funcionalidad:

El lienzo se agregará a la página web, pero no tendrá ninguna capacidad de dibujo.

Pasos:

<body>
  <header>
    <h1>Drawing Board</h1>
  </header>
  <div class="container">
    <!--agregar lienzo-->
    <canvas id="whiteboard" width="800" height="400"></canvas>
    <div class="controls">
      <input type="color" id="color-picker" value="#000000" />
      <label for="brush-size">Tamaño del pincel:</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">Limpiar</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

Agregar funcionalidad de dibujo

Requisitos:

En script.js, agrega código de JavaScript para habilitar el dibujo en el lienzo cuando se hace clic y se mueve el mouse.
Implementa oyentes de eventos para los eventos mousedown, mouseup y mousemove.

Funcionalidad:

Los usuarios ahora pueden dibujar en el lienzo usando el mouse.

Pasos:

const canvas = document.getElementById("whiteboard");
const context = canvas.getContext("2d");

let drawing = false;

canvas.addEventListener("mousedown", () => {
  drawing = true;
  context.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  context.closePath();
});

canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!drawing) return;

  context.lineCap = "round";

  context.lineTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
  context.stroke();
  context.beginPath();
  context.moveTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
}

Este código habilita el dibujo en el lienzo cuando se hace clic y se mueve el mouse.

Agregar funcionalidad de borrado

Requisitos:

En script.js, agrega código de JavaScript para limpiar el lienzo cuando se hace clic en un botón "Limpiar".
Crea un botón en index.html con un ID de "clear-btn".

Funcionalidad:

Los usuarios pueden limpiar el lienzo para comenzar un nuevo dibujo.

Pasos:

const clearButton = document.getElementById("clear-btn");

clearButton.addEventListener("click", () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

Este código permite a los usuarios limpiar el lienzo al hacer clic en el botón "Limpiar".

Agregar control de color de pincel

Requisitos:

En script.js, agrega código de JavaScript para permitir a los usuarios seleccionar un color de pincel usando un elemento <input type="color">.
Crea el selector de color de entrada en index.html con un ID de "color-picker".

Funcionalidad:

Los usuarios pueden elegir un color para su pincel.

Pasos:

const colorPicker = document.getElementById("color-picker");

colorPicker.addEventListener("input", (e) => {
  context.strokeStyle = e.target.value;
});

Este código permite a los usuarios seleccionar un color de pincel usando el selector de color.

Agregar control de tamaño de pincel

Requisitos:

En script.js, agrega código de JavaScript para permitir a los usuarios ajustar el tamaño del pincel usando un elemento <input type="range">.
Crea la entrada de rango en index.html con un ID de "brush-size".

Funcionalidad:

Los usuarios pueden cambiar el tamaño del pincel para hacer trazos más gruesos o más delgados.

Pasos:

const brushSizeInput = document.getElementById("brush-size");

brushSizeInput.addEventListener("input", (e) => {
  context.lineWidth = e.target.value;
});

Este código permite al usuario ajustar el tamaño del pincel usando la entrada de rango.

Estilos CSS

Requisitos:

Abre el archivo styles.css.
Agrega estilos CSS para que la aplicación web sea visualmente atractiva.

Funcionalidad:

Aplica estilos básicos a los elementos de la aplicación web.

Pasos:

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background: linear-gradient(135deg, #57efbf, #64a8e4);
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
  border-radius: 10px;
  padding: 10px;
}

canvas {
  background-color: #f4f0eb;
  background-size: cover;
  border: 1px solid #919396;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
  margin-top: 10px;
}

label {
  font-weight: bold;
  margin-right: 5px;
  color: #fff;
}

input[type="color"],
input[type="range"] {
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4be2ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #dac765;
}

button:focus {
  outline: none;
}

Ejecutando la aplicación

Abre index.html en un navegador web.
Prueba la aplicación agregando gastos y verificando que la lista y el resumen de gastos se actualicen correctamente.
El efecto de la página es el siguiente:

Resumen

¡Felicidades! Has creado una aplicación web de tablero de dibujo simple utilizando HTML, CSS y JavaScript. Los usuarios pueden dibujar en el lienzo, cambiar el color del pincel y ajustar el tamaño del pincel.