js canvas 画图闪烁

let offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
let offscreenCtx = offscreenCanvas.getContext('2d');

function draw() {
    // 在离屏 Canvas 上进行绘制
    offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
    // ... 绘制代码 ...

    // 将离屏 Canvas 的内容复制到屏幕上的 Canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(offscreenCanvas, 0, 0);
}

function draw() {
    // 绘制代码 ...
    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
    let canvas = document.getElementById('myCanvas');
    let ctx = canvas.getContext('2d');
    let offscreenCanvas = document.createElement('canvas');
    offscreenCanvas.width = canvas.width;
    offscreenCanvas.height = canvas.height;
    let offscreenCtx = offscreenCanvas.getContext('2d');

    function draw() {
        offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
        // 在这里添加绘制逻辑
        offscreenCtx.fillStyle = 'blue';
        offscreenCtx.fillRect(0, 0, 100, 100);

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(offscreenCanvas, 0, 0);
        requestAnimationFrame(draw);
    }
    requestAnimationFrame(draw);
</script>