[p5.js 2.0 Bug Report]: You need to await redraw() now

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.0

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Consider a sketch like this, where I want to export a higher res image on key press. Here's how I'd do this in 1.x:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circle(width/2, height/2, 200)
}

function keyPressed() {
  pixelDensity(3)
  redraw()
  saveCanvas('test.png')
}

However, in 2.0.0, this saves a blank image. Live: https://editor.p5js.org/davepagurek/sketches/GYscX3tl1

I think this is because our lifecycle hooks for pre/post draw are potentially async, and so they are internally awaited.

I can see two ways of resolving this, both valid:

• Monitor the return values of lifecycles and only await them if they're async, so that draw is synchronous if all the lifecycle hooks are synchronous
• Document that redraw must be awaited (and therefore functions calling redraw must be async functions)

I don't have a strong opinion on which approach is the right one here! The first one is probably more complex to maintain, but would be less of a breaking change from 1.x.

Start by reproducing the keyPressed sketch in p5.js 2.0.0 and inspect how redraw() handles the asynchronous pre- and post-draw lifecycle hooks. Compare the two proposed approaches, then verify that saving after redraw no longer produces a blank image and that the chosen behavior is documented.