Skip to Content
Learn
Images and Videos
Loading and Drawing Images

Unlike the primitive shapes we’ve drawn so far, media, like images, are considered external assets. To include them in our sketches, we will need to load them using special, built-in p5.js functions.

To load an image, use the loadImage() function. It requires one argument—the path to the image in your working directory.

img = loadImage('imageName.jpg');

The loadImage() function returns a p5.js Image element. Saving it to a variable lets us reuse the loaded image as many times as we want.

After loading an image, we use the image() function to draw it. The function requires three arguments: the p5.js Image element and the x and y positions where the image should be drawn on the canvas.

//Draw img to the top left corner of the canvas image(img, 0, 0);

Optionally, the image() function can take other arguments. We can also resize the drawn image to a certain width and height, as follows:

let drawnWidth = 100; let drawnHeight = 100; image(img, 0, 0, drawnWidth, drawnHeight);

We can also add an additional four arguments to draw a cropped region of the image—check out the p5.js documentation to learn more.

You can also load and draw animated GIFs into the canvas using loadImage() and image(). To have them animate, you specifically need to put them inside the draw() loop. They’re essentially multiple images packed into one, so calling image() in the draw() loop will draw the latest frame of the GIF, allowing it to animate.

draw() { image(myAnimatedGIF, 0, 0); }

Because drawing an image requires it to be completely loaded, it’s important to note how and when these functions are called.

Loading images takes time. In most cases, the loadImage() function won’t finish loading an image before the next lines of code are run—including any code that is supposed to draw the image.

Sometimes this is OK, but it can also potentially lead to unintended behavior. Later, we’ll learn to work around this problem by having more control over the loading of the images.

Instructions

1.

In the setup() function, load an image with the path given by imagePath. Save the loaded image to the img variable.

2.

In the draw() function after the line that draws the background color, draw the image at the top left corner of the canvas.

3.

The image is cut off—we only see the top left piece of it!

Modify your image() function so that the image is scaled to the width and height of the canvas.

Folder Icon

Take this course for free

Already have an account?