So far, we’ve learned to create dynamic p5.js sketches using only shapes and colors.

But, just like how you might add external images or videos onto a normal webpage, you can also use the p5.js library to incorporate external images or videos directly into the canvas!

By the end of this lesson, you will be able to:

  • Load and draw external images into the canvas
  • Display external videos in the canvas
  • Add filters effects across images and the canvas
  • Read and manipulate the pixels within the canvas, as well as in images and videos


Explore the p5.js sketch to the right. You’ll see that it uses a still image, an animated GIF image, and a video to create a multi-media collage. Click anywhere on the sketch to watch the video play!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?