How can I stop filling my circle at some point?

Question

How can I stop filling my circle at some point?

Like only fill 50% of the circle or 25% of the circle and leave the left over. Just like progress bar.

below is the code Im using but it is filling entire circle. Kindly please give me suggestions.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
ctx.lineCap = "round";

var y = ch - 10;
var drawingColor = "#0092f9";
animate();

function animate() {

    if (y > 0) {
        requestAnimationFrame(animate);
    }

    ctx.clearRect(0, 0, cw, ch);
    ctx.save();
    drawContainer(0, null, null);
    drawContainer(15, drawingColor, null);
    drawContainer(7, "white", "white");
    ctx.save();
    ctx.clip();
    drawLiquid();
    ctx.restore();
    ctx.restore();

    y--;

}

function drawLiquid() {
    ctx.beginPath();
    ctx.moveTo(0, y);
    for (var x = 0; x < 300; x += 1) {
        ctx.quadraticCurveTo(x + 5, y+5, x + 5, y);
    }
    ctx.lineTo(cw, ch);
    ctx.lineTo(0, ch);
    ctx.closePath();
    ctx.fillStyle = drawingColor;
    ctx.fill();
}

function drawContainer(linewidth, strokestyle, fillstyle) {
    ctx.beginPath();
    
 ctx.arc(cw/2, ch/2,cw/2-30,0,2*Math.PI);
    ctx.lineWidth = linewidth;
    ctx.strokeStyle = strokestyle;
    ctx.stroke();
    if (fillstyle) {
        ctx.fillStyle = fillstyle;
        ctx.fill();
    }
}

<canvas id="canvas" width=200 height=200></canvas>

Answer 1

I know zit at javascript but: Just change the limit of y in animate. I put 100 instead of 0 and it fills half the circle.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
ctx.lineCap = "round";

var y = ch - 10;
var drawingColor = "#0092f9";
animate();

function animate() {

    if (y > 100) {
        requestAnimationFrame(animate);
    }

    ctx.clearRect(0, 0, cw, ch);
    ctx.save();
    drawContainer(0, null, null);
    drawContainer(15, drawingColor, null);
    drawContainer(7, "white", "white");
    ctx.save();
    ctx.clip();
    drawLiquid();
    ctx.restore();
    ctx.restore();

    y--;

}

function drawLiquid() {
    ctx.beginPath();
    ctx.moveTo(0, y);
    for (var x = 0; x < 300; x += 1) {
        ctx.quadraticCurveTo(x + 5, y+5, x + 5, y);
    }
    ctx.lineTo(cw, ch);
    ctx.lineTo(0, ch);
    ctx.closePath();
    ctx.fillStyle = drawingColor;
    ctx.fill();
}

function drawContainer(linewidth, strokestyle, fillstyle) {
    ctx.beginPath();
    
 ctx.arc(cw/2, ch/2,cw/2-30,0,2*Math.PI);
    ctx.lineWidth = linewidth;
    ctx.strokeStyle = strokestyle;
    ctx.stroke();
    if (fillstyle) {
        ctx.fillStyle = fillstyle;
        ctx.fill();
    }
}

<canvas id="canvas" width=200 height=200></canvas>