Supporting existing canvas element for createCanvas() and createGraphics()

[ffd8]

Resolves #4564

Changes: createCanvas() and createGraphics() (including p5.Graphics), to both accept passing a 3rd or 4th param (depending on if renderer is given) with an existing html canvas element. Within createGraphics(), it was necessary to both replace the defaultCanvas0 (created with setup) and tell p5 that the _defaultGraphicsCreated is false to re-initiate the renderer. With createGraphics(), in only required intercepting the creation of a canvas element which would have been applied to the body (or node).

createCanvas() changes
createGraphics() changes
p5.Graphics changes

PR Checklist

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

[davepagurek]

I think this looks good! I made an example showing the issue with setAttributes here: https://editor.p5js.org/davepagurek/sketches/XooCglkti The existing canvas has a style="background: blue" attribute that results in the background appearing blue at first. If you call setAttributes(), it recreates the canvas and that attribute is gone. This is a mostly contrived example, but I think the bigger issue is that whatever other library you were using with the other canvas now will no longer have a reference to a canvas in the DOM.

I think that's fine, because if your intention was to use this to inject p5 into another library's canvas, then we intentionally don't want to be messing with the attributes they've set up. So maybe we can just add a note in the docs about this? e.g.:

Optionally, an existing canvas can be passed using a selector, ie. document.getElementById(''). Avoid using setAttributes() afterwards, as this will remove and recreate the existing canvas.

[Qianqianye]

Thanks @ffd8 for working on it and @davepagurek for reviewing!