createCanvas()

One of the first things you will need to do, in almost every p5 code sketch, is to create a canvas. This is one of the functions you will always put in the p5 setup() function definition.

The “canvas” is what p5 draws to. This is what most of the code you write this semester will effect.

In HTML5 the <canvas> element was designed as a way of allowing JavaScript to create complex graphics, visuals, and video within a common element on a webpage. p5 takes advantage of this element and uses it almost exclusively for its output.

• More information on the <canvas> element.

The “Hello World!” code sketches we just completed utilized, and where produced, using the HTML5 canvas. This was possible because p5 automatically creates a canvas for you, even if you do not specify one. However, the default canvas element that p5 creates is only 100 pixels in width by 100 pixels in height.

From now on, “pixels” will be abbreviated as “px”.

The following demonstrates the default size of the p5 canvas. Notice how it takes up a very small corner of the possible output area.

In order to more fully utilize space, and to create a larger area for our code sketches to be displayed in, we will need to explicitly write a statement to create a larger canvas element. To do this, we will use the createCanvas() function.

Please look at and read through the createCanvas() documentation below.

(Link to createCanvas() function documentation)

Function Parameters

The documentation for createCanvas() tells us a number of interesting details.

The function requires at least two parameters and can accept an optional third parameter. These are;

• w
  • A Number (This can be any real positive value)
  • That sets the width of the canvas in pixels
• h
  • A Number (This can be any real positive value)
  • That sets the height of the canvas in pixels
• [renderer]
  • This can be used to tell p5 to use WEBGL, thereby enabling 3d sketches. (More on that later in the semester).

This means we can set the size of our canvas, in pixels.

Below is an example of using the createCanvas() function. Notice that initially, the w and h parameters are set to 600px by 400px. Change these values in line no. 3 to change the size of the canvas.

Remember to keep the separation comma intact between the 2 parameters.
( 600, 400 )

Also notice that there is another line background('blue'). You should ignore this for the time being.

NOTE: You should always write a statement to createCanvas() as one of the first lines in your setup() function.