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';
}
}