I’ve created a small project where I tried to produce an effect similar to the Final Fantasy 8 screen transition effect.
The code is accessible through the GitHub repository.
Whilst I’m a Firefox user first I had to resort to refreshing the page on Firefox as it leaked memory of the amount required for the canvas’ image data. This leak wasn’t present on Chrome, Edge or Safari.
I’m writing directly to the image data like a buffer which I found out is far from optimal. It’s far better to only stick to drawing primitives from the API but this ultimately limits what you can do which is why I stuck with the manual operation on the image data.