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