Reference blend()

blend()

Copies a region of pixels from another image into this one.

The first parameter, srcImage, is the p5.Image object to blend.

The next four parameters, sx, sy, sw, and sh determine the region to blend from the source image. (sx, sy) is the top-left corner of the region. sw and sh are the regions width and height.

The next four parameters, dx, dy, dw, and dh determine the region of the canvas to blend into. (dx, dy) is the top-left corner of the region. dw and dh are the regions width and height.

The tenth parameter, blendMode, sets the effect used to blend the images' colors. The options are BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, or NORMAL.

Examples

Syntax

blend(srcImage, sx, sy, sw, sh, dx, dy, dw, dh, blendMode)
blend(sx, sy, sw, sh, dx, dy, dw, dh, blendMode)

Parameters

srcImage
p5.Image:

source image

sx
Integer:

x-coordinate of the source's upper-left corner.

sy
Integer:

y-coordinate of the source's upper-left corner.

sw
Integer:

source image width.

sh
Integer:

source image height.

dx
Integer:

x-coordinate of the destination's upper-left corner.

dy
Integer:

y-coordinate of the destination's upper-left corner.

dw
Integer:

destination image width.

dh
Integer:

destination image height.

blendMode
Constant:

the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.

Available blend modes are: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/

Notice any errors or typos? Please let us know. Please feel free to edit src/image/p5.Image.js and open a pull request!

Related References