<canvas width="600" height="400"></canvas>
<script>
function drawRectangle(x, y, width, height, color) {
var canvas = document.querySelector("canvas");
var brush = canvas.getContext("2d");
brush.fillStyle = color;
brush.fillRect(x, y, width, height);
brush.strokeStyle = "black";
brush.strokeRect(x, y, width, height);
}
function drawText(x, y, text) {
var canvas = document.querySelector("canvas");
var brush = canvas.getContext("2d");
brush.font = "15px Georgia";
brush.fillStyle = "black";
brush.fillText(text, x, y);
}
function drawBar(x, y, series, colors, text) {
var calculator = 0;
for(var i = 0; i < series.length; i++) {
var width = series[i];
drawRectangle(x, y + calculator, 50, width, colors[i]);
calculator = calculator + width;
}
}
var colors = ["blue", "green", "yellow", "red"];
var series2015 = [50, 25, 20, 5];
var series2016 = [65, 20, 13, 2];
drawBar(20, 70, series2015, colors, "2015");
drawBar(100, 70, series2016, colors, "2016");
</script>