PRECISO DE AJUDA PARA ENCURTAR ESSE CÓDIGO : (

A funcionalidade esta OK. Contudo, não imagino uma maneira de diminuir a quantidade de caracteres sem matar o código .

<h1>UTILIZAÇÃO DE NAVEGADORES NO  CURSO ALURA:</h1>

<canvas width="1000" height="400"></canvas>

<script>

    var screen = document.querySelector("canvas");
    var brush = screen.getContext("2d");
    var array1 = [50,25,20,5];
    var array2 = [65,20,13,2];
    var colors = ["blue","green","yellow","red"]
    var c = 0
    var c1 = 0
    var c2 = 0
    var step = 100
    var step1 = 100
    var y = 0



function subtitle (text,x,y)
{
    brush.fillStyle = "black"
    brush.font = "20px Georgia"
    brush.fillText(text,x,y) 
}
function createBeam (x,y,w,h,colors)
{
    brush.fillStyle = colors
    brush.fillRect(x,y,w,h)
    brush.strokeRect(x,y,w,h)
    brush.fill()
}
function ladder ()
{
    while(c < array1.length)
    {
        createBeam(100,step,100,array1[c],colors[c])
          step+=array1[c]
          c++ 
    }
    while(c1 < array2.length)
    {
        createBeam(400,step1,100,array2[c1],colors[c1])
        step1+=array2[c1]
          c1++
    }
}
function legend ()
{
    while(c2 < 4)
    {
        createBeam(100,300+y,20,20,colors[c2])
        y+=20
        c2++
    }

}

ladder()

subtitle(2015,100,90)
subtitle(2016,400,90)

subtitle("50%",200,130)
subtitle("25%",200,165)
subtitle("20%",200,190)
subtitle("5%",200,210)

subtitle("65%",500,145)
subtitle("20%",500,180)
subtitle("13%",500,200)
subtitle("2%",500,220)

legend()

subtitle("Chrome",120,315)
subtitle("Firefox",120,335)
subtitle("Safari",120,355)
subtitle("Outros",120,375)

</script>