Added feature to saveCanvas() to support framebuffer

[capGoblin]

Resolves #6404

Introduces an enhancement to the saveCanvas function, allowing it to accept a framebuffer as an input.

Changes:

• Added support for framebuffer as a valid argument for the saveCanvas function.
• updated comment docs to include p5.Graphics as a param.

Screenshots of the change:

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[capGoblin]

Is there anything else left that needs to be addressed in this PR?

[davepagurek]

Thanks for taking on this task! I think we don't need to do anything to support p5.Graphics in the if statement since a p5.Graphics is just a more specific case of a p5.Element:

p5.js/src/core/p5.Graphics.js

Line 26 in 28740f9

p5.Graphics = class extends p5.Element {

What we would need to do to resolve the issue is to add support for the p5.Framebuffer class. This would involve a different if statement branch because it isn't an element directly. One way to add this in might be:

• make a new 2d createGraphics() (it doesn't matter for saving if it's 2D or 3D but the browser can support more 2d canvases at once than 3D)
• loadPixels() on the framebuffer
• update the pixels on the graphic to match the pixels of the framebuffer
• call updatePixels() on the graphic
• save the graphic
• remove the graphic

[davepagurek]

Ok I think this all works in global mode! The last thing to do is to also make it work in instance mode, where createGraphics isn't globally defined. I think in that case using this.createGraphics will work though? Maybe try that and try using this in an instance mode sketch to verify

[capGoblin]

Works in both global and instance mode now.👍