Implement guideline/spec for canvas startup different cases about p5.js HOT 3 CLOSED

@evhan55

looking into this further...
the problem is if you link a sketch.js script with code something like

background(255, 0, 0);
rect(0, 0, 50, 50);

without setup and draw, it gets evaluated before the page body is loaded, and before the pCreate() function is called via onload.
one way around this is to stick the js link in the body, however, this is a little confusing. also, if there is no createGraphics() call, there is no canvas even if the body is loaded because the default canvas gets created in pCreate.

workaround using requirejs or something?
another option is to do something more like what current processingjs does, requiring you to link the script as a data-source in a div. not sure which would be the least confusing for users.

I was thinking maybe bocoup might have some ideas on this one?

from p5.js.

Oh! Yes of course. JS is so loose that these problems must come up all the time, but unfortunately it means we need to be so clear with pjs so the pjs model is

• easy to use
• can still play nice with other libs

I am spending today working on pjs stuff, I will think about this idea, and also look into the 'undefined' test and the color stuff.

from p5.js.

@lmccart

Ben at Bocoup had two suggestions for this problem, neither having to do with loading hacks but more conceptual changes:

1. Require that people call setContext('someCanvas') and if that canvas isn't in the HTML, create it. I sort of like this idea because it starts solidifying the concept that you this state-driven and you need to set the context. However, I don't love calling it setContext and would like us to consider calling it setCanvas. I am not 100% on this but I like the conceptual clarity and also how it sort of maps to the DOM, so that later on people realize they are treating DOM elements. When I asked him if it would be confusing for a beginner to have to type out the following:

setCanvas('a');
background(255, 0, 0);
rect(0, 0, 50, 50);

He said we could say "before you can draw you need to tell pjs where to draw, because iet's possible to have multiple canvases"

2. Load pjs.js at the bottom of the file, and require that they make a <canvas></canvas> in the HTML, which guarantees it will exist.

I am not sure, these ideas seem nice because they deal with the DOM directly and aren't overly complex.
On the other hand, they're not quite as sand-boxed as we were previously thinking.

Thoughts?
Ping me on GChat if you see me there and want to discuss today or tomorrow!

from p5.js.