When drawing an ImageBuffer to another ImageBuffer, the DrawingContext of the source and the destination ImageBuffers have to be flushed immediately. Otherwise an older version or a newer version of the source ImageBuffer might be drawn to the destination ImageBuffer. Consider this example and assume GPU rendering is enabled for canvas.

    <script>
        var canvas1 = document.getElementById('canvas1');
        var canvas2 = document.getElementById('canvas2');
        var canvas3 = document.getElementById('canvas3');

        var ctx3 = canvas3.getContext('2d');
        ctx3.fillStyle = 'red';
        ctx3.fillRect(0, 0, 100, 100);

        var ctx1 = canvas1.getContext('2d');
        ctx1.drawImage(canvas3, 0, 0);

        ctx3.fillStyle = 'green';
        ctx3.fillRect(0, 0, 100, 100);

        var ctx2 = canvas2.getContext('2d');
        ctx2.drawImage(canvas3, 0, 0);

        ctx3.fillStyle = 'blue';
        ctx3.fillRect(0, 0, 100, 100);
    </script>

1. If we do not flush any of the canvases after the "drawImage" calls, the first two canvases will not be drawn. This means an older version of canvas3 is drawn to canvas1 and canvas2.
2. If we flush canvas3 after the "drawImage" calls, all the canvases will be filled with blue. This means a newer version of canvas3 is drawn to canvas1 and canvas2.