Unstable framerate

[kmamal]

Is using setTimeout(0) in an infinite loop still the recommended way to draw every frame? I want to do animation and motion using @napi-rs/canvas, and when using this code with setTimeout(0):

window.render(pixelWidth, pixelHeight, pixelWidth * 4, 'rgba32', canvas.data(), {
      scaling: 'linear',
      dstRect: { x: 0, y: 0, width: pixelWidth, height: pixelHeight },
    })

the FPS I'm seeing fluctuates a lot around at 60. At times it even goes to 70 or reduces to 30. If I use skia-canvas' own Window, I get a proper 60±1 FPS.

Am I doing something wrong here? Or is this expected?

Originally posted by @ajitid in #52

I can't reproduce that on my system so I'm splitting it into a new issue.

By default the windows created by @kmamal/sdl have vsync enabled so your framerate should match your monitor refresh rate. Can you share more details about your setup?

• What OS?
• Are you running the example as-is or have you made modifications?
• What are the values of window.accelerated and window.vsync?

[ajitid]

Hi! Here are the details you asked:

OS: Windows 11
Display: 2560x1440 with 125% scaling
Monitor refresh rate: 59.95 Hz
window.accelerated and window.vsync: Both true

I'm not using the example, instead you can find the code here.

To reproduce:

1. Clone the repo I mentioned above (use node-sdl-repro-71 branch)
2. Install deps using bun install and run using bun run main.ts

You'd see 3 values being logged to the console. Those are: 1% low FPS, minimum FPS recorded and maximum FPS recorded.

[kmamal]

@ajitid You are measuring the frame time at the wrong place. It is the window.render() call that vsync applies to. To get the correct time when a frame gets displayed you have to measure it after window.render() returns.

diff --git a/draw.ts b/draw.ts
index 55592b2..fee9842 100644
--- a/draw.ts
+++ b/draw.ts
@@ -32,12 +32,9 @@ export function draw() {
   c.fillStyle = 'violet'
   c.arc(w / 2, h / 2, w / 4, 0, 2 * Math.PI)
   c.fill()
-
-  // show stats:
-  showFps()
 }
 
-function showFps() {
+export function showFps() {
   const c = canvasContext
 
   c.fillStyle = 'white'
diff --git a/main.ts b/main.ts
index e6a5569..eba7a97 100644
--- a/main.ts
+++ b/main.ts
@@ -5,7 +5,7 @@ import { createCanvas } from '@napi-rs/canvas'
 import './globals'
 import './debug'
 import { patchCanvasContext } from './patches'
-import { draw } from './draw'
+import { draw, showFps } from './draw'
 
 async function setup() {
   counter++
@@ -61,6 +61,9 @@ async function main() {
       dstRect: { x: 0, y: 0, width: pixelWidth, height: pixelHeight },
     })
 
+    // show stats:
+    showFps()
+
     await setTimeout(0)
   }
 }