Bug 241808 – Using canvas.context.drawImage() of a video in a requestAnimationFrame loop to copy a video yields low frame-rate

• Status: NEW
• Component: Canvas

When using the canvas context.drawImage() method, in a requestAnimationFrame loop, to copy a video playing at 60fps the canvas does not get updated at 60fps. The resulting canvas appears to update at a much lower framerate compared to the video.

Expected results: The canvas should update at the same rate as the playing video.

[Sam Sneddon [:gsnedders]]

Presumably GPU Process IPC?

[Simon Fraser (smfr)]

Do you have a test case you can point us to?

Here is a basic test case: https://graceful-speculoos-27352e.netlify.app

Safari: Canvas output on right is laggy.

Chrome: No Lag.

Firefox: No lag.

Thanks for looking into this.

[Radar WebKit Bug Importer]

<rdar://problem/96066407>

[Jonathan Madelaine]

We have also been experiencing this bug.

Our product is a video review platform, and we've had numerous customers experiencing low frame rate when using Safari. It's hard to review a video when you're seeing a fraction of the true frame rate, so this is a significant issue for us.