I'm working on a small video game which includes a drawing loop and I experienced a strange behavior with MS Edge (but it happens in an other way on Chrome too).

At one particular time, I want to get data about pixels and use, just one time, ctx.getImageData() It triggers a CPU memory increase at this very precise moment (I know this function is costly)... But during all next iterations of the loop, the painting time dramatically increase.

Here is the link:

in green, the painting duration

So what could be the reason of this increasing painting time?

CodePudding user response：

Chrome and Edge are nowadays both based on Chromium, which uses GPU to accelerate 2D canvas operations. If you navigate to edge://flags or chrome://flags (on Chrome) and disable Accelerated 2D canvas, you'll notice that the slow behavior starts instantly instead of after the getImageData() call. This is because the canvas is now, by default, being rendered by your CPU.

But why does it start off fast and then slow down after getImageData()? When using GPU acceleration, it appears Chrome at least swaps to the CPU based renderer after using getImageData().

Here's a quote from a related

What do you think of this new way ?