[p5.js 2.0+ Bug Report]: The last three saveCanvas() reference examples throw an error and save nothing #9381

Most appropriate sub-area of p5.js?

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

p5.js version

2.0.0 through 2.4.0-rc.6

Web browser and version

Chrome 153, Firefox 157

Operating system

Ubuntu

Steps to reproduce this

Steps:

1. Open the saveCanvas() reference page and copy any of the last three examples into a sketch running p5.js 2.x.
2. Run it.
3. No file is downloaded and the console shows TypeError: filename.includes is not a function.

The first three examples (saveCanvas(), saveCanvas('myCanvas.jpg'), saveCanvas('myCanvas', 'jpg')) work fine.

Possible cause

In 2.x, createCanvas() returns a p5.Renderer and createGraphics() returns a p5.Graphics and neither is a p5.Element anymore. The checks at the start of saveCanvas() in src/image/image.js only look for an HTMLCanvasElement, a p5.Element or a p5.Framebuffer so the renderer is treated as the filename.

save() in src/io/files.js already handles this case with args[0] instanceof Renderer || args[0] instanceof Graphics. When I added the same branch to saveCanvas() using args[0].canvas, all three examples worked locally.