canvas-sketch icon indicating copy to clipboard operation
canvas-sketch copied to clipboard

Render function called twice while exporting

Open delucis opened this issue 5 years ago • 7 comments

I noticed while experimenting with canvas-sketch that when you export an image using cmd + s or an animation using cmd + shift + s, the render function is called twice for each frame.

To reproduce:

// bug-demo.js
const SKETCH = require('canvas-sketch')

const sketch = () => {
  return ({ frame }) => {
    console.log(`render frame ${frame}`)
  }
}

SKETCH(sketch)

Then launch:

canvas-sketch bug-demo.js --open

Open the browser console and then try saving with cmd + s and you should see “render frame 0” logged twice.

Here are the relevant lines from my console (Firefox 62.0.3):

browser console output demonstrating error

“render frame 0” is logged once on page load, then twice more on export/save. When exporting an animation the duplication happens for each frame.

I imagine this has performance implications, but I also tripped up on it because I was using a generator function to get the next value to display for each frame. Each frame was being rendered twice (and saved once), which meant every other value returned from the generator was lost.


P.S. Generally the experience getting started with this has been really great. Thanks for the thoughtful library and clear documentation!

delucis avatar Oct 15 '18 02:10 delucis