58 - 🎨 Canvas en HTML: Qué Es y Cómo Usarlo

Jorge Catalao agosto 07, 2025
HTML




1. Introducción a HTML Canvas

El elemento <canvas> en HTML se utiliza para dibujar gráficos en una página web. Es un contenedor para gráficos que permite realizar representaciones visuales dinámicas a través de JavaScript.

Para crear gráficos, necesitas utilizar JavaScript, ya que el <canvas> por sí solo no puede dibujar. Con el Canvas, puedes realizar diversas operaciones, como dibujar rutas, cajas, círculos, texto y añadir imágenes.

El gráfico a continuación muestra diferentes elementos que se pueden crear utilizando <canvas>: un rectángulo rojo, un rectángulo de gradiente, un rectángulo multicolor y texto multicolor.

Además, el Canvas es compatible con todos los principales navegadores, lo que lo convierte en una herramienta versátil para desarrolladores web.


Ejemplo


Código del ejemplo 

          // Código para el ejemplo visual
          <canvas id="miCanvas" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var canvas = document.getElementById('miCanvas');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'green';
            ctx.fillRect(10, 10, 150, 100);
          </script>


2. Configuración del Lienzo

Para utilizar el elemento <canvas>, primero debes configurarlo correctamente en tu documento HTML. El elemento <canvas> se define con el atributo width y height para establecer el tamaño del lienzo.

El siguiente código muestra cómo crear un lienzo con un ancho de 400 píxeles y una altura de 200 píxeles. También puedes aplicar estilos CSS para personalizar su apariencia, como bordes y fondos.


Ejemplo


Código del ejemplo 

          <canvas id="miLienzo" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>


3. Introducción a JavaScript y Canvas

JavaScript es un lenguaje de programación que permite crear contenido interactivo en la web. Cuando se trabaja con el elemento <canvas>, JavaScript se utiliza para dibujar y manipular gráficos en el lienzo.

La interacción entre JavaScript y Canvas se logra a través del contexto de dibujo que proporciona el lienzo. Puedes utilizar JavaScript para realizar tareas como dibujar formas, aplicar colores, y animar gráficos en tiempo real.

En el siguiente ejemplo, veremos cómo inicializar el contexto de un lienzo y dibujar un simple rectángulo en él utilizando JavaScript.


Ejemplo


Código del ejemplo 

          <canvas id="canvasJS" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var canvas = document.getElementById('canvasJS');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'blue';
            ctx.fillRect(50, 50, 100, 50);
          </script>


4. Ejemplos de Dibujo en Canvas

Ejemplo: Dibujar una Línea


Código del ejemplo 

    <canvas id="canvasLinea" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
    
    <script>
        var c = document.getElementById("canvasLinea");
        var ctx = c.getContext("2d");
        ctx.moveTo(0, 0);          // Comienza en la esquina superior izquierda
        ctx.lineTo(400, 200);      // Termina en la esquina inferior derecha
        ctx.strokeStyle = 'red';   // Cambia el color de la línea
        ctx.lineWidth = 5;         // Establece el grosor de la línea
        ctx.stroke();
    </script>


Ejemplo: Dibujar un Círculo


Código del ejemplo 

          <canvas id="canvasCirculo" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasCirculo");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(200, 100, 50, 0, 2 * Math.PI); // (x, y, radio, ángulo de inicio, ángulo de final)
            ctx.fillStyle = 'blue'; // Color de relleno
            ctx.fill(); // Rellena el círculo
            ctx.strokeStyle = 'black'; // Color del borde
            ctx.lineWidth = 2; // Grosor del borde
            ctx.stroke(); // Dibuja el borde
          </script>


Ejemplo: Dibujar un Cuadrado


Código del ejemplo 

          <canvas id="canvasCuadrado" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasCuadrado");
            var ctx = c.getContext("2d");
            ctx.fillStyle = 'green'; // Color de relleno
            ctx.fillRect(150, 75, 100, 100); // (x, y, ancho, alto)
            ctx.strokeStyle = 'black'; // Color del borde
            ctx.lineWidth = 2; // Grosor del borde
            ctx.strokeRect(150, 75, 100, 100); // Dibuja el borde del cuadrado
          </script>


Ejemplo: Dibujar "Hello Mundo"


Código del ejemplo 

          <canvas id="canvasTexto" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasTexto");
            var ctx = c.getContext("2d");
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.fillStyle = "purple"; // Color del texto
            ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
          </script>


Ejemplo: Dibujar "Hello Mundo" con Contorno


Código del ejemplo 

          <canvas id="canvasTextoContorno" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasTextoContorno");
            var ctx = c.getContext("2d");
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.strokeStyle = "blue"; // Color del contorno
            ctx.lineWidth = 2; // Grosor del contorno
            ctx.strokeText("Hello Mundo", 50, 100); // Dibuja el contorno del texto en (x, y)
          </script>


Ejemplo: Degradado Lineal


Código del ejemplo 

          <canvas id="canvasGradient" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasGradient");
            var ctx = c.getContext("2d");
  
            // Crear un degradado lineal
            var gradient = ctx.createLinearGradient(0, 0, 400, 0); // (x0, y0, x1, y1)
            gradient.addColorStop(0, "red");    // Color inicial
            gradient.addColorStop(1, "yellow"); // Color final
  
            // Rellenar el fondo con el degradado
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, c.width, c.height); // Rellenar todo el canvas
  
            // Dibujar el texto encima del degradado
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.fillStyle = "blue";   // Color del texto
            ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
          </script>


Ejemplo: Degradado Radial


Código del ejemplo 

          <canvas id="canvasRadial" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasRadial");
            var ctx = c.getContext("2d");
  
            // Crear un degradado radial
            var gradient = ctx.createRadialGradient(200, 100, 20, 200, 100, 150); // (x0, y0, r0, x1, y1, r1)
            gradient.addColorStop(0, "blue");   // Color en el centro
            gradient.addColorStop(1, "white");  // Color en el borde
  
            // Rellenar el fondo con el degradado
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, c.width, c.height); // Rellenar todo el canvas
  
            // Dibujar el texto encima del degradado
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.fillStyle = "black";  // Color del texto
            ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
          </script>


Ejemplo: Dibujar un Sol


Código del ejemplo 

                <canvas id="canvasSol" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
                
                <script>
                    var c = document.getElementById("canvasSol");
                    var ctx = c.getContext("2d");

                    // Dibujar el círculo del sol
                    ctx.fillStyle = "yellow";
                    ctx.beginPath();
                    ctx.arc(200, 200, 50, 0, Math.PI * 2); // (x, y, radio, inicio, fin)
                    ctx.fill();
                    ctx.stroke(); // Dibuja el borde del sol

                    // Función para dibujar un rayo puntiagudo
                    function drawPointedRay(x, y, angle) {
                        ctx.beginPath();
                        ctx.moveTo(x, y); // Punto de inicio del rayo
                        ctx.lineTo(x + 60 * Math.cos(angle), y + 60 * Math.sin(angle)); // Rayo puntiagudo
                        ctx.lineWidth = 4; // Grosor del rayo
                        ctx.strokeStyle = "orange"; // Color del rayo
                        ctx.stroke();
                    }

                    // Función para dibujar un rayo curvado
                    function drawCurvedRay(x, y, angle) {
                        ctx.beginPath();
                        ctx.moveTo(x, y); // Punto de inicio del rayo
                        ctx.quadraticCurveTo(
                            x + 30 * Math.cos(angle), 
                            y + 30 * Math.sin(angle), 
                            x + 60 * Math.cos(angle), 
                            y + 60 * Math.sin(angle)
                        ); // Curva
                        ctx.lineWidth = 4; // Grosor del rayo
                        ctx.strokeStyle = "orange"; // Color del rayo
                        ctx.stroke();
                    }

                    // Dibujar los rayos del sol
                    for (var i = 0; i < 12; i++) {
                        var angle = i * (Math.PI / 6); // 12 rayos, 30 grados entre ellos
                        drawPointedRay(200, 200, angle); // Rayos puntiagudos
                        drawCurvedRay(200, 200, angle); // Rayos curvados
                    }
                </script>


5. Efectos de Color

El elemento <canvas> permite crear varios efectos de color utilizando métodos de dibujo de JavaScript. Puedes aplicar colores sólidos, degradados y patrones a las figuras que dibujes en el lienzo. Además, puedes usar el método globalAlpha para cambiar la transparencia de los colores, lo que permite crear efectos visuales interesantes.


Ejemplo: Efectos de Color


Código del ejemplo 

          <canvas id="canvasEfectos" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasEfectos");
            var ctx = c.getContext("2d");
  
            // Rellenar un rectángulo con color sólido
            ctx.fillStyle = "blue";
            ctx.fillRect(50, 50, 100, 100);
  
            // Rellenar un rectángulo con degradado
            var gradient = ctx.createLinearGradient(200, 50, 300, 150);
            gradient.addColorStop(0, "red");
            gradient.addColorStop(1, "yellow");
            ctx.fillStyle = gradient;
            ctx.fillRect(200, 50, 100, 100);
  
            // Aplicar transparencia
            ctx.globalAlpha = 0.5; // 50% de transparencia
            ctx.fillStyle = "green";
            ctx.fillRect(50, 200, 100, 100);
            ctx.globalAlpha = 1.0; // Restablecer opacidad a 100%
          </script>


5. Efectos de Color Mejorados

En este ejemplo, se muestran varios efectos de color en el lienzo, incluyendo un degradado radial, un patrón de líneas, y la posibilidad de aplicar transparencia a los colores.


Ejemplo: Efectos de Color Mejorados


Código del ejemplo 

          <canvas id="canvasEfectosMejorados" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasEfectosMejorados");
            var ctx = c.getContext("2d");
  
            // Degradado radial
            var radialGradient = ctx.createRadialGradient(200, 200, 20, 200, 200, 200);
            radialGradient.addColorStop(0, "yellow");
            radialGradient.addColorStop(1, "blue");
            ctx.fillStyle = radialGradient;
            ctx.fillRect(0, 0, 400, 400);
  
            // Aplicar un patrón de líneas diagonales
            ctx.strokeStyle = "black";
            ctx.lineWidth = 2;
  
            for (let i = 0; i <= 400; i += 20) {
              ctx.beginPath();
              ctx.moveTo(0, i);
              ctx.lineTo(i, 400);
              ctx.stroke();
            }
  
            // Aplicar transparencia
            ctx.globalAlpha = 0.5; // 50% de transparencia
            ctx.fillStyle = "red";
            ctx.fillRect(50, 50, 100, 100);
            ctx.globalAlpha = 1.0; // Restablecer opacidad a 100%
          </script>


6. Conclusiones y Recursos Adicionales

Conclusiones

A lo largo de esta lección, hemos explorado el elemento <canvas> de HTML, su configuración y cómo utilizar JavaScript para dibujar formas y aplicar efectos de color. El <canvas> es una herramienta poderosa para crear gráficos dinámicos en la web y es compatible con todos los navegadores modernos.

Desde dibujar líneas y círculos hasta crear efectos de color complejos, el lienzo ofrece una amplia gama de posibilidades para los desarrolladores. Con la práctica, puedes utilizar <canvas> para construir aplicaciones visuales interactivas.


Recursos Adicionales



7. Ejercicios Prácticos

Ejercicios Propuestos
  1. Dibuja una Casa: Crea un dibujo simple de una casa utilizando el <canvas>. Utiliza rectángulos y triángulos para representar las paredes y el techo.
  2. Rueda de Color: Crea un gráfico de "rueda de colores" usando círculos de diferentes colores dispuestos en un círculo.
  3. Animación Simple: Implementa una animación simple que muestre un círculo moviéndose de izquierda a derecha en el lienzo.
  4. Recrea un Logo: Intenta recrear un logo simple utilizando formas básicas y texto en el <canvas>.
  5. Juego de Click: Crea un juego simple donde los jugadores deben hacer clic en un objeto que se mueve aleatoriamente en el lienzo.

Intenta realizar estos ejercicios para practicar y mejorar tus habilidades en el uso de <canvas> y JavaScript. ¡Diviértete programando!





Tags:
Jorge Catalao

Posted by: Jorge Catalao

Bienvenido a mi blog de cocina, un espacio donde comparto recetas sencillas que celebran tanto los sabores de hoy como los de ayer. Aquí encontrarás platos fáciles de preparar, con ingredientes accesibles y explicaciones paso a paso, pensadas para quienes disfrutan cocinar sin complicarse. Me inspiro en la cocina tradicional, esos sabores que nos conectan con la infancia y la memoria, pero también en recetas modernas, rápidas y prácticas para el ritmo actual. Desde guisos caseros hasta ideas frescas para todos los días, este blog es para quienes aman el sabor auténtico, sin importar el nivel de experiencia en la cocina. ¡Cocinar puede ser simple, delicioso y hasta divertido! Gracias por estar acá y compartir conmigo esta pasión por la buena comida.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias