[Proyecto] Gráfico de Barras | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
</head>
<body>
    <canvas width="600" height="400"></canvas>

    <script>

        function dibujarRectangulo(x,y,w,h,color){

            var pantalla = document.querySelector("canvas");
            var pincel = pantalla.getContext("2d");

            pincel.fillStyle = color;
            pincel.fillRect(x,y,w,h);
            pincel.strokeStyle ="black";
            pincel.strokeRect(x,y,w,h)
        }
        function dibujarTexto(x,y,texto){

            var pantalla = document.querySelector("canvas");
            var pincel = pantalla.getContext("2d");

            pincel.font = "15px Georgia";
            pincel.fillStyle = "black";
            pincel.fillText(texto,x,y)
        }

        var serie2009 = [6,47,41,3,3];
        var serie2019 = [81,9,3,3,4];
        var colores = ["blue","green","yellow","red","gray"];

        function dibujarBarra(x, y, serie, colores,texto){
            dibujarTexto(x, y-10,texto)
            var contador = 0
            for(var i=0; i<serie.length; i++){  
                dibujarRectangulo(x,y+contador,60,serie[i],colores[i]);   
                contador += serie[i]  
            }

        }
        dibujarBarra(50, 50, serie2009, colores, "2009");
        dibujarBarra(150, 50, serie2019, colores, "2019");


    </script>
</body>
</html>