Learn

The p5.js library provides many built-in functions to interact with the canvas with easy-to-remember drawing functions for shapes. While you can call drawing functions in the setup() function, it is typical to use drawing functions in the eponymous draw() function. Let’s begin with the basics by drawing a point to the canvas!

The p5.js library provides the point() function, which draws a single pixel to the canvas. This function requires two arguments: an x coordinate for the horizontal position and a y coordinate for the vertical position of the point.

Diagram of point

The built-in line() function draws a direct path between two points. To draw a single line, we need four arguments: x and y coordinates of the starting point and x and y coordinates of the endpoint.

Diagram of line

Instructions

1.

Inside the draw() function, use the point() function to draw a pixel at the center of the 400px by 400px canvas.

2.

Next, try drawing a point that is 100 pixels to the left of the center point.

3.

Great! Now let’s practice drawing lines! Use the line() function to draw a diagonal line between two points at coordinates (20, 40) and (320, 120).

4.

Draw a vertical line that goes across the center of your canvas. This line will equally divide the left and right sides of your canvas.

5.

Lastly, draw a diagonal line that starts at the bottom left corner and ends at the top right corner of your canvas.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?