问如何修复“ctx.clearRect不是一个函数”

EN

function generateSubject(subjectNumber ,name, firstAttestation, secondAttestation, rating, semester) {

    let ratingBar = document.getElementById('rating-bar');
    let canvasBar = document.createElement('canvas');
    canvasBar.className = 'round-progress-bars ' + subjectNumber;
    canvasBar.style.width = '70px';
    canvasBar.style.height = '70px';
    ratingBar.appendChild(canvasBar);

    return canvasBar

}

let bars = [];
bars.push(generateSubject(1));

let rating1 = [80];
roundAnimation(bars, rating1);

function roundAnimation(bars, rating) {

    for (let i = 0; i < bars.length; i++) {
        let sim;
        let ctx = bars[i].getContext("2d");  // <-- Get the canvas context
        let al = [];
        for (let j = 0; j < bars.length; j++) {
            al.push(0);
        }
        let start = 4.72;
        let cw = 70;
        let ch = 70;
        let diff;

        function progressSim(){
            console.log(i);
            diff = ((al[i] / 100) * Math.PI*2*10).toFixed(2);
            ctx.clearRect(0, 0, cw, ch);
            ctx.lineWidth = 10;
            ctx.fillStyle = '#2F80ED';
            ctx.strokeStyle = "#2F80ED";
            ctx.textAlign = 'center';
            ctx.font = '18px Roboto';
            ctx.fillText(al[i], cw*.5, ch*.5+5, cw);
            ctx.beginPath();
            ctx.arc(35, 35, 30, start, diff/10+start, false);
            ctx.stroke();
            if(al[i] >= rating[i]){
                clearTimeout(sim);
                // Add scripting here that will run when progress completes
            }
            else {
                al[i]++;

            }
        }
        sim = setInterval(progressSim, 40);
    }
}

<div id="rating-bar"></div>