Canvas Lags

function generateTransparentBackground(
    canvasBackground: HTMLCanvasElement, individualPixelSize: number,
    c1: string, c2: string, canvasWidth: number, canvasHeight: number
) {
    const canvasBackgroundCTX = canvasBackground.getContext("2d")!;

    const offscreenCanvas = document.createElement("canvas");
    offscreenCanvas.width = canvasWidth;
    offscreenCanvas.height = canvasHeight;
    const offscreenCTX = offscreenCanvas.getContext("2d")!;

    let cols = canvasBackground.width / (individualPixelSize * individualPixelSize);
    let rows = canvasBackground.height / (individualPixelSize * individualPixelSize);
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            offscreenCTX.fillStyle = ((i + j) % 2 === 0) ? c1 : c2;
            offscreenCTX.fillRect(
                i * individualPixelSize,
                j * individualPixelSize,
                individualPixelSize,
                individualPixelSize
            );
        }
    }
    
    canvasBackgroundCTX.drawImage(offscreenCanvas, 0, 0);
}

export default function BaseCanvas(props: any) {
    let canvasBackground!: HTMLCanvasElement;
    let baseCanvasElement!: HTMLDivElement;

    const individualPixelSize: number = 20;
    const c1: string = "rgba(0, 0, 0, 1)"
    const c2: string = "rgb(255, 255, 255)"

    let canvasResWidth: number = individualPixelSize * props.width;
    let canvasResHeight: number = individualPixelSize * props.height;

    onMount(() => {
        baseCanvasElement.style.width = `${props.width}px`;
        baseCanvasElement.style.height = `${props.height}px`;
        generateTransparentBackground(
            canvasBackground, individualPixelSize, c1, c2, canvasResWidth, canvasResHeight
        )
    })

    return (
        <div class={"base-canvas"} ref={baseCanvasElement}>
            <canvas class={"background-layer-canvas"} width={canvasResWidth} height={canvasResHeight} ref={canvasBackground}/>
        </div>
    )
}

function generateTransparentBackground(
    canvasBackground: HTMLCanvasElement, individualPixelSize: number,
    c1: string, c2: string, canvasWidth: number, canvasHeight: number
) {
    const canvasBackgroundCTX = canvasBackground.getContext("2d")!;

    const offscreenCanvas = document.createElement("canvas");
    offscreenCanvas.width = canvasWidth;
    offscreenCanvas.height = canvasHeight;
    const offscreenCTX = offscreenCanvas.getContext("2d")!;

    let cols = canvasBackground.width / (individualPixelSize * individualPixelSize);
    let rows = canvasBackground.height / (individualPixelSize * individualPixelSize);
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            offscreenCTX.fillStyle = ((i + j) % 2 === 0) ? c1 : c2;
            offscreenCTX.fillRect(
                i * individualPixelSize,
                j * individualPixelSize,
                individualPixelSize,
                individualPixelSize
            );
        }
    }
    
    canvasBackgroundCTX.drawImage(offscreenCanvas, 0, 0);
}

export default function BaseCanvas(props: any) {
    let canvasBackground!: HTMLCanvasElement;
    let baseCanvasElement!: HTMLDivElement;

    const individualPixelSize: number = 20;
    const c1: string = "rgba(0, 0, 0, 1)"
    const c2: string = "rgb(255, 255, 255)"

    let canvasResWidth: number = individualPixelSize * props.width;
    let canvasResHeight: number = individualPixelSize * props.height;

    onMount(() => {
        baseCanvasElement.style.width = `${props.width}px`;
        baseCanvasElement.style.height = `${props.height}px`;
        generateTransparentBackground(
            canvasBackground, individualPixelSize, c1, c2, canvasResWidth, canvasResHeight
        )
    })

    return (
        <div class={"base-canvas"} ref={baseCanvasElement}>
            <canvas class={"background-layer-canvas"} width={canvasResWidth} height={canvasResHeight} ref={canvasBackground}/>
        </div>
    )
}