<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
let colores = ["blue", "green", "yellow", "red", "gray"];
let serie = [6, 47, 41, 30, 30];
function dibujarBarra(x, y, serie, colores, texto) {
pincel.font = "15px Georgia";
pincel.fillStyle = "black";
pincel.fillText(texto, x + 10, y - 20);
for (let i = 0; i < serie.length; i++) {
pincel.fillStyle = colores[i];
pincel.fillRect(x, y, 50, serie[i]);
console.log(x, y, 50, y + serie[i], serie[i]);
pincel.fillStyle = "black";
pincel.fillText(serie[i], x + 80, y + serie[i]);
// debugger
y = y + serie[i];
}
}
dibujarBarra(50, 50, serie, colores, "2019");
</script>