W jaki sposób napełnić obiekt w JS'owym canvasie?

Witam,
Mam problem dotyczący JS'owego canvasa, Nie wiem w jaki sposób mogę wypełnić obiekt tak zwanej szklanki.
Szklankę stworzyłem ale nie działa mi to :/ Nie wiem czemu, próbowałem wiele razy za pomocą clipa, save, restore ale albo rysuje sie sama szklanka albo fale.
Szukalem po google ale nie działa, i żaden sposób który probowalem też nie :/
Chce po prostu zrobic cos takiego ze bede mogl wpisac liczbe procentow ktora ma byc wypelniona szklanka i sie wypelnia powoli do tych proecentow.

Tutaj mój aktualny kod (posiada duzo roznych komentarzy bo porobowalem to naprawic ale nie wychodzilo):

const canvas = document.getElementById('cupCanvas');
const ctx = canvas.getContext('2d');

let currentCup = null;


const fillTheCup = () => {

}

const animateFill = () => {

    // ctx.save();
    ctx.lineWidth = 5;
    let c = new Cup();

    ctx.save()
    // ctx.clip();
    c._fill();
    // ctx.stroke();
    ctx.restore();
    // ctx.restore();
    // ctx.stroke()
    // console.log(ctx.clip());

    // ctx.clip();


    // ctx.
    // c._fill();

    // ctx.stroke();
    // ctx.restore();
    // ctx.fill();
}

const createTheCup = () => {
    animateFill();

    // animateFill();
    // currentCup = new Cup();
    // currentCup._fill();
    // currentCup.animateFill();
}

class Cup {
    constructor() {
        this.x = 50;
        this.y = 10;

        this.width = 50;
        this.height = 90;

        ctx.lineCap = "round";

        this._create();

        this.animationY = this.y;
        // this.animateFill();
    }

    animateFill() {
        ctx.clip()
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    _fill() {
        ctx.beginPath();
        ctx.moveTo(0, this.y);

        for (var x = 0; x < this.x + this.width * 2; x += 20) {
            ctx.quadraticCurveTo(x + 10, this.y + 15, x + 20, this.y);
        }

        ctx.lineTo(this.x + this.width * 2.2, canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.closePath();
        // ctx.clip();
        ctx.stroke();

        // console.log("ok")

        ctx.strokeStyle = `#0092f9`;
        ctx.fillStyle = `#0092f9`;
        ctx.fill();
    }

    _create() {
        // ctx.save();
        // ctx.clip();

        ctx.lineWidth = 5;

        ctx.beginPath();

        // pierwsza scianka
        ctx.moveTo(50, 100);
        ctx.lineTo(20, 10);

        // lacznik
        ctx.moveTo(49, 100);
        ctx.lineWidth = 7;
        ctx.lineTo(50, 100);

        // podstawa
        ctx.lineWidth = 5;

        ctx.moveTo(50, 100);
        ctx.lineTo(100, 100);

        // lacznik v2
        ctx.moveTo(99, 100);
        ctx.lineWidth = 7;
        ctx.lineTo(101, 100);

        ctx.lineWidth = 5;

        // druga scianka
        ctx.moveTo(100, 100);
        ctx.lineTo(135, 10);

        // dach
        ctx.moveTo(137, 10);
        ctx.lineTo(18, 10);

        ctx.clip();
        ctx.closePath();
        ctx.stroke();

        // ctx.save();
        // ctx.clip();

        // ctx.rect(10, 10, 50, 50);

        // this._fill();
        // ctx.restore();
        // ctx.restore();
    }

}

Dzieki za jakąkolwiek pomoc :)
Pozdrawiam.
Mondonno.

Tak na oko to jest za dużo moveTo. Każde wywołanie tej metody tworzy nową ścieżkę. Jak chcesz zrobić fill to nie zadziała.

może przydałby się taki "debugger" do canvasa, że przepuszczasz kod przez to i masz podgląd w zwolnionym tempie, która komenda, w jaki sposób zmienia istniejący obrazek. No ale chyba nikt nie zrobił takiego debuggera jeszcze (chociaż od biedy ten z dev toolsów można by spróbować użyć, choć mam wrażenie, że do takich wizualnych rzeczy niekoniecznie się sprawdzi)

A poza tym wrzuć to na jakieś jsfiddle czy coś podobnego, to będzie można to odpalić i sprawdzić.