On Web, use requestAnimationFrame for RedrawRequested

src/platform_impl/web/web_sys/animation_frame.rs

@@ -0,0 +1,62 @@
+use std::cell::Cell;
+use std::rc::Rc;
+use wasm_bindgen::closure::Closure;
+use wasm_bindgen::JsCast;
+
+pub struct AnimationFrameHandler {
+    window: web_sys::Window,
+    closure: Closure<dyn FnMut()>,
+    handle: Rc<Cell<Option<i32>>>,
+}
+
+impl AnimationFrameHandler {
+    pub fn new(window: web_sys::Window) -> Self {
+        let handle = Rc::new(Cell::new(None));
+        let closure = Closure::new({
+            let handle = handle.clone();
+            move || handle.set(None)
+        });
+
+        Self {
+            window,
+            closure,
+            handle,
+        }
+    }
+
+    pub fn on_animation_frame<F>(&mut self, mut f: F)
+    where
+        F: 'static + FnMut(),
+    {
+        let handle = self.handle.clone();
+        self.closure = Closure::new(move || {
+            handle.set(None);
+            f();
+        })
+    }
+
+    pub fn request(&self) {
+        if let Some(handle) = self.handle.take() {
+            self.window
+                .cancel_animation_frame(handle)
+                .expect("Failed to cancel animation frame");
+        }
+
+        let handle = self
+            .window
+            .request_animation_frame(self.closure.as_ref().unchecked_ref())
+            .expect("Failed to request animation frame");
+
+        self.handle.set(Some(handle));
+    }
+}
+
+impl Drop for AnimationFrameHandler {
+    fn drop(&mut self) {
+        if let Some(handle) = self.handle.take() {
+            self.window
+                .cancel_animation_frame(handle)
+                .expect("Failed to cancel animation frame");
+        }
+    }
+}

src/platform_impl/web/web_sys/canvas.rs

@@ -19,6 +19,7 @@ use crate::platform_impl::{OsError, PlatformSpecificWindowBuilderAttributes};
 use crate::window::{WindowAttributes, WindowId as RootWindowId};
 
 use super::super::WindowId;
+use super::animation_frame::AnimationFrameHandler;
 use super::event_handle::EventListenerHandle;
 use super::intersection_handle::IntersectionObserverHandle;
 use super::media_query_handle::MediaQueryListHandle;
@@ -42,6 +43,7 @@ pub struct Canvas {
     pointer_handler: PointerHandler,
     on_resize_scale: Option<ResizeScaleHandle>,
     on_intersect: Option<IntersectionObserverHandle>,
+    animation_frame_handler: AnimationFrameHandler,
 }
 
 pub struct Common {
@@ -98,7 +100,7 @@ impl Canvas {
             .expect("Invalid pseudo-element");
 
         let common = Common {
-            window,
+            window: window.clone(),
             document,
             raw: canvas,
             style,
@@ -151,6 +153,7 @@ impl Canvas {
             pointer_handler: PointerHandler::new(),
             on_resize_scale: None,
             on_intersect: None,
+            animation_frame_handler: AnimationFrameHandler::new(window),
         })
     }
 
@@ -441,6 +444,13 @@ impl Canvas {
         self.on_intersect = Some(IntersectionObserverHandle::new(self.raw(), handler));
     }
 
+    pub(crate) fn on_animation_frame<F>(&mut self, f: F)
+    where
+        F: 'static + FnMut(),
+    {
+        self.animation_frame_handler.on_animation_frame(f)
+    }
+
     pub fn request_fullscreen(&self) {
         self.common.request_fullscreen()
     }
@@ -449,6 +459,10 @@ impl Canvas {
         self.common.is_fullscreen()
     }
 
+    pub fn request_animation_frame(&self) {
+        self.animation_frame_handler.request();
+    }
+
     pub(crate) fn handle_scale_change<T: 'static>(
         &self,
         runner: &super::super::event_loop::runner::Shared<T>,

src/platform_impl/web/web_sys/mod.rs

@@ -1,3 +1,4 @@
+mod animation_frame;
 mod canvas;
 pub mod event;
 mod event_handle;