<canvas width="600" height="400"></canvas>
<script>
const tela = document.querySelector('canvas')
const pincel = tela.getContext('2d')
pincel.fillStyle = 'lightgrey'
pincel.fillRect(0, 0, 600, 400)
var yTexto = 0
const cores = ['blue', 'green', 'yellow', 'red']
const serie2015 = [50, 25, 20, 5]
const serie2016 = [65, 20, 13, 2]
function desenhaBarra(x, y, dados, cores, ano) {
let altura = y
for (let i = 0; i < cores.length; i++) {
pincel.fillStyle = cores[i]
pincel.fillRect(x, altura, 50, dados[i])
altura = altura + dados[i]
}
pincel.fillStyle = 'black'
pincel.font = '18px Georgia'
pincel.fillText(ano, x, 40)
}
desenhaBarra(50, 50, serie2015, cores, '2015')
desenhaBarra(150, 50, serie2016, cores, '2016')
</script>