Supporting existing canvas elements for createGraphic

[valentinptc]

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Dom
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Feature enhancement details:

Allow the use of existing canvas elements for createGraphic. This makes it much easier to integrate p5js with existing content.

Solution

#4563

[valentinptc]

@limzykenneth why did you closed this pull request without comments? Is it not a good idea?

[limzykenneth]

The implementation should be worked out in the issue first before a PR should be filed. The PR is closed so that we can focus discussions in the issue instead of splitting it between the issue and the PR.

[ffd8]

Would love it if this PR could be accepted! Just tried making the case to do so on the v1.6 open call by @Qianqianye

The first use case I can imagine is using p5.js as a canvas texture for A-Frame, specifically for AR usage. Anywhere else that one would first create a canvas, then populate it with p5.js content would be relevant. I could also imagine it being useful for using p5.js as the engine within a fancy web-app where various views (createGraphics() content) is provided within draggable canvas elements across a website – all run from a single sketch.

[ffd8]

Quick add-on, while this PR was specific to modifying how createGraphics() is implemented – what if it was also an option for the main canvas, created by createCanvas() – allowing one to use an existing canvas as well, not only an instance container? Same reasoning as above, A-Frame texture is the main one I think of where the canvas needs to already exist, but perhaps there are other uses?

[limzykenneth]

@ffd8 I think this is fine to add and with some minor adjustment in #4563 it should be ok, although I'm not quite satisfied with the parameters ordering, there probably isn't a non-breaking way to solve that (ideally the canvas is not the last parameter for p5.Graphics and createGraphics).

[Qianqianye]

Thanks for restarting this conversation. I'm inviting @davepagurek to this discussion as well.

[ffd8]

@limzykenneth I agree with the order being a little strange.. though it's probably the only way to approach it in a non-breaking way. Perhaps with P2D being the default renderer, createGraphics() could check if that 3rd value was a renderer (P2D or WEBGL if thats it?) or an html element (canvas)? Then one could use just 3 values, createGraphics(width, height, canvas) or 4 createGraphics(width, height, renderer, canvas)?

[davepagurek]

We could maybe do something like createGaphics([element], width, height, [mode]) if we want to support supplying the canvas first, relying on checking whether the first argument is a number or not to see how to read the arguments.

Although, just a heads up, whenever one calls setAttributes on a WebGL graphic/canvas, it recreates the canvas here: https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.js#L341 I'm not sure if it's possibly to get a new WebGL context out of a canvas element with new attributes if one has already done so earlier (unless someone knows a way to do that?), so we'd have to add a disclaimer that you would need to just accept whatever attributes are in the existing canvas or disable setAttributes. We might also want to detect existing values of attributes, like whether or not the canvas has an alpha channel, so _renderer._glAttributes is still correct.

[ffd8]

Personally I find it alright to mention the [element] towards the end of the createGraphics() list of params, so one enters as usual, then under special circumstances says "oh yeah and draw it in that canvas"...?

As for the context/setAttributes – I'm a total canvas/getContext noob.. but potentially couldn't it run a getContextAttributes on the existing canvas to make sure nothing is lost?

[davepagurek]

@ffd8 right, we'd have to use that to populate _render._glAttributes, so that shouldn't be a problem! It would just be any subsequent calls to setAttributes() that we wouldn't be able to support.