p5.js createCanvas not defined error. Uncaught ReferenceError

Question

Problem:

I am trying to use p5.js in my simple app, and including it thus:

<script src="static/js/p5.js"> </script>

What I've tried:

If I put a debugger and look in the console, I do get the functions for p5Color (for ex) and others. And the script gets loaded on to the page fine. Except createCanvas doesn't auto-complete and when used in the page, throws above error.

Why? How can I work around this?

Answer 1

p5.js won't load into "global mode" unless it sees setup() or draw() defined on the page.

Option 1 - force global mode. (Note that if you do this, createCanvas() won't do you much good in the console, since setup() will have already run on page load.)

<script src="static/js/p5.js"> </script>
<script>
    function setup() {
        //...
    }
</script>

Option 2 - use instance mode. (This is probably your best bet if you really want to use p5.js from the console.)

var s = function( sketch ) {
  sketch.setup = function() {
    sketch.createCanvas(700, 410);
    //...
  };
};    
var myp5 = new p5(s);