Duda ¿Graficas de más del 100%?

Hola! Alguien consideró el caso de que si hay un error de dedo por parte del usuario y la suma de los % supera el 100? Esto con el fin de que las graficas no salgan una más grande que la otra.

Les presento una propuesta, me gustaría saber si alguien tiene alguna otra solución que pueda ser más optima.

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

<script>

    function dibujarRectangulo(x, y, base, altura, color) {
        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);    
    }

    function dibujarBarra(x, y, serie, colores, texto) {

        escribirTexto(x,y - 10,texto);

        var alturaRect = 0;

        while (alturaRect < 100) { //Si ponemos alturaRect <= imprime 2 veces las graficas

            var posicion = 0;

            for (bandera = 1;bandera <= serie.length; bandera++){
            // ".length" te da el número de elementos de una serie 

            dibujarRectangulo(x,y + alturaRect,50,serie[posicion],colores[posicion]);
            alturaRect = alturaRect + serie[posicion];

            posicion++;
            }
            return alturaRect;

        }

    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];

    var colores = ["blue","green","yellow", "red","gray"];

    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");





</script>