<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect (0,0,600,400);
pincel.fill();
function textoBarra (x, y, texto){
pincel.fillStyle = "black";
pincel.font = "15px Georgia";
pincel.fillText(texto, x, y-10);
}
function dibujarRectangulo (x, y, ancho, alto, color){
pincel.fillStyle = color;
pincel.fillRect(x, y, ancho, alto);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, ancho, alto);
pincel.beginPath();
pincel.fill();
}
function dibujarBarra (x, y, ancho, serie, color, texto){
textoBarra(x, y, texto);
var acum = 0;
for(var i=0; i<=serie.length;i++){
alto = serie[i];
dibujarRectangulo(x, y+acum, ancho, alto, color[i]);
acum = acum + alto;
}
}
var serie2009 = [6, 47, 41, 3, 3];
var serie2019 = [81, 9, 3, 3, 4];
var color = ["blue", "green", "yellow", "red", "orange"];
dibujarBarra (50, 50, 50, serie2009, color, "2009");
dibujarBarra (150, 50, 50, serie2019, color, "2019");
</script>
