Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Minha resolução

<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>
1 resposta
solução!

Rogério, muito obrigado por compartilhar conosco sua resposta! Parabéns, o código está bem limpo!