Canvas 2D Renderer
p5.js uses Canvas 2D Renderer to display images as bitmaps. It uses an image(img, x, y) function, where img is the source image and (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.
| Code Block | ||||
|---|---|---|---|---|
| ||||
let img; // Declare variable
function setup() {
createCanvas(720, 400);
img = loadImage('pathToYourImage/imageName'); // Load the image
}
function draw() {
// Displays the image at its actual size at point (0,0)
image(img, 0, 0);
// Displays the image at point (0, height/2) at half size
image(img, 0, height / 2, img.width / 2, img.height / 2);
} |
...