Tive como preferência por as instruções em inglês até mesmo para me acostumar com idiomas para DEVS. Espero que gostem do modo que fiz o código. Boa prática!
<canvas width="600" height="400"></canvas>
<script>
function drawRectangle(x, y, width, height, color) {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
ctx.strokeStyle = 'black';
ctx.strokeRect(x, y, width, height);
}
function drawText(text, x, y) {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.font = '20px Georgia';
ctx.fillText(text, x, y);
}
function drawBar(x, y, serie, colors, text) {
drawText(text, x, y - 10);
var addUp = 0;
for (var i = 0; i < serie.length; i++) {
var height = serie[i];
drawRectangle(x, y + addUp, 50, height, colors[i]);
addUp += height;
}
}
var colors = ['blue', 'green', 'yellow', 'red'];
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
drawBar(50, 50, serie2015, colors, '2015');
drawBar(150, 50, serie2016, colors, '2016');
</script>