How slow is it these days? Even readPixels() in OpenGL and hw buffer copies in C++ are “slow” because you’re transferring the image data over your PCI bus.

Also curious how & whether an async method could help? Is the problem that getImageData() has to wait to flush all pending draw calls before reading back? Are you thinking of some kind of callback that returns the previous frame’s data, rather than demanding it ‘now’? There probably is room for perf improvement, totally, just curious how you’re imagining it would look and if you have data on where the current bottlenecks are.

PBOs allow for asynchronous readbacks from opengl. It's not slow because of the pcie bus (heck for most devices this is unified memory in the first place, it doesn't hit any bus other than dram). Rather it's slow for the same reason glFinish() is. You're blocking waiting for the results of the asynchronous rendering which you probably also just kicked off right at that point.

Also it's not like the opengl is happening on the same thread as the canvas2d (or even the same process), so that's yet more synchronization that a blocking getImageData needs to wait on.

Yeah, exactly, that’s what I’m curious about - if the browser’s renderer is adding significant amounts of delay due to additional synchronization, or if the problem with canvas.getImageData() is the same problem we’ve always had and if the delays are similar. This does make it seem like a callback to receive last frame’s image could be much faster than a synchronous read call, and I’d certainly use that if it existed…

canvas.getImageData() would have gotten a lot slower as GPU acceleration of Canvas2D became increasingly more common. The initial versions of Canvas2D were all software rasterized, which means getImageData() likely didn't involve any IPCs and definitely didn't involve any GPU readbacks. It was just a memcpy if that.

"How slow is it these days?"

So slow, that chrome falls back to software rendering, if you call getImageData 3 frames in a row.

(and does not even switch back to hardwarerendering if you stop calling it - last time I checked, was some months ago, so maybe that has improved)

This post implies you can mark a canvas as "read frequently" to improve getImageData.

I'm excited to try it out, as I do a kind of hacky hit detection using a hidden canvas, And reading the pixel color is certainly the bottleneck there