canvas-sketch
canvas-sketch copied to clipboard
Render function called twice while exporting
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):
“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!