Skip to content

Conversation

ayushman1210
Copy link

@ayushman1210 ayushman1210 commented Oct 8, 2025

fix(saveGif): Resolve black frames and add 'reset' option

This PR addresses a long-standing bug in saveGif() that caused the initial frames of a generated GIF to be black. It also introduces a new feature, as suggested by the @davepagurek , to provide users with more control over the recording process.


🐛 The Bug

When calling saveGif(), the first few frames of the output GIF were often black. This was caused by a race condition:

  1. The saveGif function manually calls this.redraw() to render a single frame.
  2. Immediately after, it captures the pixels from the canvas.
  3. However, redraw() is asynchronous and only schedules a paint. The pixel capture was happening before the browser had a chance to complete the rendering, resulting in a capture of a blank (black) canvas.

✨ The Solution

This PR implements a two-part solution to fix the bug while preserving the function's intended design.

1. Synchronized Frame Capture

The core timing bug is resolved by await-ing a requestAnimationFrame promise immediately after this.redraw() is called. This ensures that the while loop pauses until the frame is fully rendered on the canvas before capturing the pixels. This completely eliminates the black frames.

2. New reset Option

As per the @davepagurek feedback, the intentional resetting of frameCount is crucial for recording animations from their start. This behavior has been preserved as the default.

A new reset option has been added to the options object to give users the choice to either reset the animation or record from the current state of the sketch.


🚀 Usage

The saveGif function now accepts a reset boolean in its options object, which defaults to true.

Default Behavior (Resetting the animation)
This will reset frameCount to 0 and record the animation from the beginning.

function keyPressed() {
  if (key === 's') {
    // Records the animation from the start for 5 seconds.
    saveGif('my-animation.gif', 5);
  }
}

@ayushman1210
Copy link
Author

ayushman1210 commented Oct 8, 2025

hi maintainer @perminder-17
can you please review this PR for the issue #8123
sorry for the late !!

@perminder-17 perminder-17 self-requested a review October 8, 2025 18:43
@ayushman1210
Copy link
Author

"Hi @perminder-17, just wanted to check in on this PR for issue #8123 when you have a moment. No rush, just wanted to make sure it doesn't get lost. Thanks for your time!"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant