<canvas width="600" height="400"></canvas>
<script>
function desenhaRetangulo(x,y,largura, altura,cor) {
var grafico = document.querySelector('canvas');
var barra = grafico.getContext('2d');
barra.font = "30px Courier New";
barra.strokeText("2015", 90,20);
barra.fillStyle=cor;
barra.fillRect(x,y, largura, altura);
barra.strokeStyle='black';
barra.strokeRect(x,y, largura, altura);
}
function desenhaRetangulo(x,y,largura, altura,cor) {
var grafico = document.querySelector('canvas');
var barra = grafico.getContext('2d');
barra.font = "30px Georgia";
barra.strokeText("2015", 90,30);
barra.strokeText("2016", 245,30);
barra.fillStyle=cor;
barra.fillRect(x,y, largura, altura);
barra.strokeStyle='black';
barra.strokeRect(x,y, largura, altura)
}
desenhaRetangulo(100,40,60,70,"blue");
desenhaRetangulo(100,90,60,30,"green");
desenhaRetangulo(100,120,60,30,"yellow");
desenhaRetangulo(100,140,60,10,"red");
desenhaRetangulo(250,40,60,60,"blue");
desenhaRetangulo(250,100,60,30,"green");
desenhaRetangulo(250,125,60,20,"yellow");
desenhaRetangulo(250,140,60,10,"red");
</script>