<canvas width="600" height="400"></canvas>
<script>
function desenhaBarra(x, y, tamanho, cor, texto,) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle=cor;
pincel.fillRect(x,y, 50, tamanho);
pincel.strokeStyle='black';
pincel.strokeRect(x,y, 50, tamanho);
pincel.font='15px Georgia';
pincel.fillStyle='black';
pincel.fillText(texto, x+51, y+15);
}
function serie2015(x, y, Ano) {
desenhaBarra(x, y, 50, 'blue', 'Chrome');
desenhaBarra(x, y+50, 25, 'green', 'Firefox');
desenhaBarra(x, y+50+25, 20, 'yellow', 'Safari');
desenhaBarra(x, y+50+25+20, 5, 'red', 'Outros');
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font='15px Georgia';
pincel.fillStyle='black';
pincel.fillText(Ano, x+10, y-6);
}
function serie2016(x, y, Ano) {
desenhaBarra(x, y, 65, 'blue', 'Chrome');
desenhaBarra(x, y+65, 20, 'green', 'Firefox');
desenhaBarra(x, y+65+20, 13, 'yellow', 'Safari');
desenhaBarra(x, y+65+20+13, 2, 'red', 'Outros');
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font='15px Georgia';
pincel.fillStyle='black';
pincel.fillText(Ano, x+10, y-6);
}
serie2015(100, 50, '2015');
serie2016(220, 50, '2016');
</script>