Mi solución para una barra que pedía la cantidad de divisiones, los valores de cada división y los colores que deseaba.

<canvas width="600" height="400">

</canvas>

<script >



    function dibujarRectangulo(x,y,base,color,altura){


        var pantalla = document.querySelector("canvas")
        var pincel= pantalla.getContext("2d")

        pincel.fillStyle= color;
        pincel.fillRect(x,y,base,altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,base,altura);

    }

    function escribirTexto(x,y,texto){

        var pantalla =document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.font="15px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto,x,y);

    }

    var  datos =[]

    var x = 1;
    var cantidad =prompt("Ingrese la cantidad de divisiones usadas para su barra")

    while(x<=cantidad){
    y= prompt("Insertar un valor para del porcentaje que sumen 100");
    datos.push(y);
    x=x+1;
    }

    var z=1 

    var colores =[]
    while(z<=cantidad){
    y= prompt("Insertar el color para cada barra");
    colores.push(y);
    z=z+1;
    }

    console.log(datos);


    //Generamos la barra

    escribirTexto(100,50,"Mostraremos la barra del primer arreglo = [" + datos + "]");



    var  w= 0;
    var suma =0;

    while(w < cantidad){

    dibujarRectangulo(200,100+suma,75,colores[w], datos[w]/100*200);

    escribirTexto(200+75/4,100+suma+(datos[w]/100*200)/2,"["+datos[w]+"%]");

    escribirTexto(300+75/4,100+suma+(datos[w]/100*200)/2,"("+colores[w]+")");

    suma= suma+datos[w]/100*200
    w++;

    }


    dibujarRectangulo(150,300,175,"black",25);



</script>