How can I get vsync callback on HTML5 canvas?

Question

How can I vsync callback on HTML5 canvas?

Mesdames

Answer 1

There's no such thing. The browser should take care of doing the appropriate syncs, and you can help it by using requestAnimationFrame() - see, for example, http://paulirish.com/2011/requestanimationframe-for-smart-animating/ and https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame.

Zakarias

Brilliant. It looks exactly what I want. – Mesdames

Answer 2

* NEW 2017 answer *

Although this is an old 2011 answer, and accurate for its time, the old answer of "There is no such thing" is somewhat outdated now.

Currently, as of 2017, requestAnimationFrame() is now widely in practice to be synchronized to refresh cycles, so it has now defacto become the VSYNC callback.

It has 120 callbacks per second on 120Hz gaming monitors whenever browser performance is not constrained (e.g. fast desktops), so it now scales to monitor refresh rates in all web browsers (with a few exceptions, such as Microsoft IE/Edge's 105Hz limit).

In Chrome, the time parameter of requestAnimationFrame() is VSYNC time, and according to www.vsynctester.com modern implementations of requestAnimationFrame() has now become the defacto VSYNC callback -- it's typically called back right after the previous VSYNC page flip, to render a frame for the next refresh cycle (or windows compositing manager, for that matter).

P.S. I am now an Invited Expert in W3C Web Platform Working Group and currently have one commit in modifying HTML 5.2 DRAFT 8 to clarify rAF() synchronization to refresh cycles. Also, there's an article I've written for improving a VSYNC API further for HTML 5.2 or later: http://www.blurbusters.com/blur-busters-working-on-changes-to-html-5-2/

Lekishalela