We’ve learned a lot about what happens in the background when a p5.js sketch starts! The setup() function is automatically called, creating an HTML <canvas> element in our index.html. Now, let’s learn how to use the p5.js library to draw two-dimensional shapes!

The p5.js sketch, or HTML <canvas> element, is a native HTML element that can be dynamically drawn to using JavaScript. The p5.js library provides a suite of drawing functions for common shapes and graphics that simplifies interacting with the canvas. In this lesson, we will explore the coordinate system that the canvas uses, p5.js shape and style functions, and how to create patterns using for loops.

In this this lesson, we will introduce the following shape functions:

• point() and line()
• rect() and square()
• ellipse() and circle()
• triangle() and quad()

We will also introduce how to change the style of shapes using:

• stroke() and strokeWeight()
• fill() and no noFill()

Let’s start by learning about the coordinate system that p5.js canvas uses!