Reference image()

image()

Draws an image to the canvas.

The first parameter, img, is the source image to be drawn. img can be any of the following objects:

The second and third parameters, dx and dy, set the coordinates of the destination image's top left corner. See imageMode() for other ways to position images.

Here's a diagram that explains how optional parameters work in image():

The fourth and fifth parameters, dw and dh, are optional. They set the the width and height to draw the destination image. By default, image() draws the full source image at its original size.

The sixth and seventh parameters, sx and sy, are also optional. These coordinates define the top left corner of a subsection to draw from the source image.

The eighth and ninth parameters, sw and sh, are also optional. They define the width and height of a subsection to draw from the source image. By default, image() draws the full subsection that begins at (sx, sy) and extends to the edges of the source image.

The ninth parameter, fit, is also optional. It enables a subsection of the source image to be drawn without affecting its aspect ratio. If CONTAIN is passed, the full subsection will appear within the destination rectangle. If COVER is passed, the subsection will completely cover the destination rectangle. This may have the effect of zooming into the subsection.

The tenth and eleventh paremeters, xAlign and yAlign, are also optional. They determine how to align the fitted subsection. xAlign can be set to either LEFT, RIGHT, or CENTER. yAlign can be set to either TOP, BOTTOM, or CENTER. By default, both xAlign and yAlign are set to CENTER.

Examples

Syntax

image(img, x, y, [width], [height])
image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight], [fit], [xAlign], [yAlign])

Parameters

img
p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture:

image to display.

x
Number:

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

y
Number:

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

width
Number:

width to draw the image.

height
Number:

height to draw the image.

dx
Number:

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

dy
Number:

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

dWidth
Number:

the width of the destination rectangle

dHeight
Number:

the height of the destination rectangle

sx
Number:

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

sy
Number:

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

sWidth
Number:

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

sHeight
Number:

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

fit
Constant:

either CONTAIN or COVER

xAlign
Constant:

either LEFT, RIGHT or CENTER default is CENTER

yAlign
Constant:

either TOP, BOTTOM or CENTER default is CENTER


Related References