Fiz assim, bem mais longo, mas funcional e cheio de complementos, mas alguém me ajuda ?

Queria só saber se tem outra maneira de escrever aquela linha do ___ (underlines), pq com o "<big>" eu não consegui ?

<meta charset="UTF-8">
<canvas width = '600' height = '400'></canvas>

<script>

    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');

    pincel.fillStyle = 'lightblue';
    pincel.fillRect(0, 0, 600, 330);

function titulo (titu, x, y, cor) {

    var tela = document.querySelector ('Canvas');
    var pincel = tela.getContext ('2d');

    pincel.font = '25px fantasy';
    pincel.fillStyle = cor;
    pincel.fillText (titu, x, y);

}

function texto (txt, x, y, cor) {

    var tela = document.querySelector ('Canvas');
    var pincel = tela.getContext ('2d');

    pincel.font = '20px Trattatello';
    pincel.fillStyle = cor;
    pincel.fillText (txt, x, y);

}

function Chrome (x, y, tamanho1, tamanho2, cor) {

    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');

    pincel.fillStyle = cor;
    pincel.fillRect (x, y, tamanho1, tamanho2);
    pincel.strokeStyle = 'black';
    pincel.strokeRect (x, y, tamanho1, tamanho2);

}

function Firefox (x, y, tamanho1, tamanho2, cor) {

    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');

    pincel.fillStyle = cor;
    pincel.fillRect (x, y, tamanho1, tamanho2);
    pincel.strokeStyle = 'black';
    pincel.strokeRect (x, y, tamanho1, tamanho2);

}

function Safari (x, y, tamanho1, tamanho2, cor) {

    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');

    pincel.fillStyle = cor;
    pincel.fillRect (x, y, tamanho1, tamanho2);
    pincel.strokeStyle = 'black';
    pincel.strokeRect (x, y, tamanho1, tamanho2);

}

function Outros (x, y, tamanho1, tamanho2, cor) {

    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');

    pincel.fillStyle = cor;
    pincel.fillRect (x, y, tamanho1, tamanho2);
    pincel.strokeStyle = 'black';
    pincel.strokeRect (x, y, tamanho1, tamanho2);

}

//Titulo
titulo ('Navegadores mais usados na turma', 115, 20, 'purple');

// Legenda
texto ('legenda ↓', 0, 15, 'black');

texto ('Chrome', 0, 50, 'blue');
Chrome (0, 60, 30, 30, 'blue');

texto ('Firefox', 0, 115, 'orange')
Firefox (0, 125, 30, 30, 'orange')

texto ('Safari', 0,180, 'red');
Safari (0, 190, 30, 30, 'red');

texto ('Outros', 0, 245, 'green');
Outros (0, 255, 30, 30, 'green');


//Gráfico 2015
Chrome (200, 180, 50, 50, 'blue');

Firefox (200, 230, 50, 25, 'orange');

Safari (200, 255, 50, 20, 'red');

Outros (200, 275, 50, 5, 'green');

texto ('___________________________________________', 40, 280, 'black');
texto ('2015', 202, 310, 'black');


//Gráfico 2016
Chrome (400, 180, 50, 65, 'blue');

Firefox (400, 245, 50, 20, 'orange');

Safari (400, 265, 50, 13, 'red');

Outros (400, 278, 50, 2, 'green');

texto ('2016', 403, 310, 'black');


</script>

Ah e alguém poderia me explicar como funciona o array no caso do código do professor ? ☻