Programming graphics with p5.js is a lot like drawing on graph paper, except the HTML <canvas> element is your paper! The <canvas> element is an HTML element that renders graphics created with JavaScript’s Canvas API. As you can see in the diagram below, the <canvas> element can be used alongside other HTML elements on the web page.

Utilizing the Canvas API behind the scenes, the p5.js library provides many built-in drawing functions that simplify drawing to the HTML <canvas> on the fly using JavaScript. The p5.js library removes pesky nuances such as rendering context and introduces more familiar function names when drawing to the <canvas>.

The p5.js library’s built-in createCanvas() function dynamically creates an empty HTML <canvas> element to the web page. The function takes two arguments: the width and height of the canvas element in pixels.

// Creates a canvas with the width of canvasWidth and the height of canvasHeight
createCanvas(canvasWidth, canvasHeight);

Once the createCanvas() function has been called, the canvas can be styled further using CSS to, for example, position the canvas at the center of the web page.

If the createCanvas() function is not explicitly called, p5.js will automatically create an HTML <canvas> element that is 100 pixels wide and 100 pixels tall. If, for some reason, your p5.js sketch does not require a canvas, explicitly call the noCanvas() function to stop p5.js from creating a canvas at the start of the program.