How to load an image in P5 js

Here the code to load and show an image in P5.js.

To the default starter sketch, let’s add the code to preload the file:

var img

function preload(){
  img = loadImage('myImage.jpg')
}

An image URL can be remote or local to the sketch.

Then, let’s draw the loaded image in the draw function:

function draw() {
  background(220)
  image(img, 20, 20)
}

We need to add the x and y parameters, optionally the width and height as well:

function draw() {
  background(220);
  image(img, 20, 20, 100, 100)
}

Here the example.