fillRect not working when I have a lot of canvas elements

I have a Vue app where I want to perform fillRect on 10000 canvas elements.
It seems that when the number is really big the code doesn’t work anymore.
What can I do about this?

for (let key = 1; key <= 10000; key++) {
    let boxId = parseInt(key);
    let bridge = document.getElementById(boxId);

    if (this.scratched.scratchedValue.includes(boxId) == false) {
        let bridgeCanvas = bridge.getContext('2d');

        bridgeCanvas.beginPath();
        bridgeCanvas.fillStyle = "#b6b6b4";
        bridgeCanvas.fillRect(0, 0, bridge.width, bridge.height);
        bridge.style.opacity = '1';
        
    } else {
        bridge.style.opacity = '1';
        bridge.style.outline = '2px solid #ef7200';
    }
}