Esta ves no logre el texto :( Si alguien me ilumina, le agradecería :)
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var serie2009 = [6, 47, 41, 3, 3];
var serie2019 = [81, 9, 3, 3, 4];
var colores = ["blue","green","yellow", "red","gray"];
function dibujarRectangulo(x, y, base, altura, color) {
pincel.fillStyle=color;
pincel.fillRect(x,y, base, altura);
pincel.strokeStyle="black";
pincel.strokeRect(x,y, base, altura);
}
function escribirTexto(texto, x , y) {
pincel.font="15px Georgia";
pincel.fillStyle="black";
pincel.fillText(texto, x, y);
}
function dibujarBarra(x, y, serie, colores, texto){
pincel.fillStyle = colores;
pincel.fillRect(x, y, 100, serie);
pincel.strokeStyle="black";
pincel.strokeRect(x, y, 100, serie);
}
//Aquí viene el texto faltante
dibujarRectangulo(0, 0, 600, 400, "lightblue");
escribirTexto(55, 55, "2009");
// Barras
var masVisible = 20;
/* masVisible = 20; es para hacer que las barras sean mas
* visibles para el usuario, para poner por Default descamentar
* la siguiente sinea*/
//masVisible = 0;
var nivel = 100;
for (var i = 0; i < serie2009.length; i++) {
dibujarBarra(100, nivel, serie2009[i]+masVisible, colores[i], "2009");
nivel = 100;
for (var x = 0; x < i+1; x++) {
nivel += serie2009[x]+masVisible;
}
}
nivel = 100;
for (var i = 0; i < 5; i++) {
dibujarBarra(400, nivel, serie2019[i]+masVisible, colores[i], "2009");
nivel = 100;
for (var x = 0; x < i+1; x++) {
nivel += serie2019[x]+masVisible;
}
}
</script>