Static image 

pub static image: ImageInternalType

Draw an image to the p5.js canvas.

This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.

This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. Here's a diagram to explain further:

Examples

let img;
function preload() {
  img = loadImage('assets/laDefense.jpg');
}
function setup() {
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}

let img;
function preload() {
  img = loadImage('assets/laDefense.jpg');
}
function setup() {
  background(50);
  // Top-left corner of the img is at (10, 10)
  // Width and height are 50 x 50
  image(img, 10, 10, 50, 50);
}

function setup() {
  // Here, we use a callback to display the image after loading
  loadImage('assets/laDefense.jpg', img => {
    image(img, 0, 0);
  });
}

let img;
function preload() {
  img = loadImage('assets/gradient.png');
}
function setup() {
  // 1. Background image
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height, 100 x 100
  image(img, 0, 0);
  // 2. Top right image
  // Top-left corner of destination rectangle is at (50, 0)
  // Destination rectangle width and height are 40 x 20
  // The next parameters are relative to the source image:
  // - Starting at position (50, 50) on the source image, capture a 50 x 50
  // subsection
  // - Draw this subsection to fill the dimensions of the destination rectangle
  image(img, 50, 0, 40, 20, 50, 50, 50, 50);
}

Overloads

img the image to display

x the x-coordinate of the top-left corner of the image

y the y-coordinate of the top-left corner of the image

width? the width to draw the image

height? the height to draw the image

---

img the image to display

dx the x-coordinate of the destination rectangle in which to draw the source image

dy the y-coordinate of the destination rectangle in which to draw the source image

dWidth the width of the destination rectangle

dHeight the height of the destination rectangle

sx the x-coordinate of the subsection of the source image to draw into the destination rectangle

sy the y-coordinate of the subsection of the source image to draw into the destination rectangle

sWidth? the width of the subsection of the source image to draw into the destination rectangle

sHeight? the height of the subsection of the source image to draw into the destination rectangle

---