<canvas width="600" height="400">

<script>

let tela = document.querySelector("canvas");
let pincel = tela.getContext("2d");

//dados de 2015


let yQuadrados = [100,150,170,195]
let porcentagem2015 = [50,20,25,5]
let cores = ["blue","green","yellow","red"]


// dados de 2016


let yQuadrados2 = [100,165,185,198]
let porcentagem2016 = [65,20,13,2]


function desenhaQuadrado(x,y,largura,altura,cor){

    pincel.fillStyle = cor
    pincel.strokeStyle = "black"
    pincel.fillRect(x,y,largura,altura)
    pincel.strokeRect(x,y,largura,altura)
}



function texto(texto , x, y) {

    pincel.font="15px Arial";
    pincel.fillStyle="black";
    pincel.fillText(texto, x, y);    
}


function desenhaBarras2015(){
    for(i = 0; i < yQuadrados.length; i++){
    pincel.fillStyle = cores[i];
    pincel.fillRect(200,yQuadrados[i],50,porcentagem2015[i]);
    pincel.strokeRect(200,yQuadrados[i],50,porcentagem2015[i])

  }

}

function desenhaBarras2016(){

    for(i = 0; i < yQuadrados2.length; i++){
    pincel.fillStyle = cores[i];
    pincel.fillRect(350,yQuadrados2[i],50,porcentagem2016[i]);
    pincel.strokeRect(350,yQuadrados2[i],50,porcentagem2016[i])

  }

}

desenhaQuadrado(0,0,600,400,"lightgrey")
texto("2015",208,90)
desenhaBarras2015()
texto("2016",358,90)
desenhaBarras2016()



</script>