Submodule 16.2: Basics of p5.js

In order to start coding with p5.js we should first create our canvas.

To do this, we use the pre-build p5.js function createCanvas();

This function is defined only one time in our setup.

This function accepts two arguments: width and height, thus we have createCanvas(width, height); 

When we call this function with specific values, the canvas element is created in the document with width and height dimensions equal to the values we have passed. The values we pass are automatically assigned pixels units. 

When we define these values, we can directly use width and height inside our canvas to refer to their values.

If we do not use createCanvas();  in our code, the system automatically creates one with 100 x 100 pixels.

A nice feature of p5.js is that it enables us to create a canvas that equals the window width and height of our page even if we don't know its size. This is achieved with the system variables windowWidth and windowHeight.

These variables, automatically store the width and height size of our page. Thus writing  createCanvas(windowWidth,windowHeight);  will result in creating a canvas equal to our browser window size.

• See more about createCanvas() function