🏗️ Adjust to call onFrameRender after _applyEffects.

src/movie/movie.ts

@@ -153,11 +153,7 @@ export class Movie {
     await new Promise<void>(resolve => {
       if (!this.renderingFrame) {
         // Not rendering (and not playing), so play.
-        this._render(undefined, () => {
-          // Call optional onDraw callback when render is complete
-          options.onDraw?.()
-          return resolve()
-        })
+        this._render(undefined, resolve, options.onDraw)
       }
 
       // Stop rendering frame if currently doing so, because playing has higher
@@ -404,10 +400,10 @@ export class Movie {
    * Processes one frame of the movie and draws it to the canvas
    *
    * @param [timestamp=performance.now()]
-   * @param [done=undefined] - Called when done playing or when the current
-   * frame is loaded
+   * @param [done=undefined] - Called when done playing or when the current frame is loaded
+   * @param [onFrameRender=undefined] - Called when the current frame is rendered
    */
-  private _render (timestamp = performance.now(), done = undefined) {
+  private _render (timestamp = performance.now(), done = undefined, onFrameRender = undefined) {
     clearCachedValues(this)
 
     if (!this.rendering) {
@@ -487,6 +483,7 @@ export class Movie {
       this._renderBackground(timestamp)
       this._renderLayers()
       this._applyEffects()
+      onFrameRender?.()
     } else {
       // If we are recording, pause the media recorder until the movie is
       // ready.