blendMode()

Sets the way colors blend when added to the canvas.

By default, drawing with a solid color paints over the current pixel values on the canvas. blendMode() offers many options for blending colors.

Shapes, images, and text can be used as sources for drawing to the canvas. A source pixel changes the color of the canvas pixel where it's drawn. The final color results from blending the source pixel's color with the canvas pixel's color. RGB color values from the source and canvas pixels are compared, added, subtracted, multiplied, and divided to create different effects. Red values with red values, greens with greens, and blues with blues.

The parameter, mode, sets the blend mode. For example, calling blendMode(ADD) sets the blend mode to ADD. The following blend modes are available in both 2D and WebGL mode:

• BLEND: color values from the source overwrite the canvas. This is the default mode.
• ADD: color values from the source are added to values from the canvas.
• DARKEST: keeps the darkest color value.
• LIGHTEST: keeps the lightest color value.
• EXCLUSION: similar to DIFFERENCE but with less contrast.
• MULTIPLY: color values from the source are multiplied with values from the canvas. The result is always darker.
• SCREEN: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of MULTIPLY)
• REPLACE: the last source drawn completely replaces the rest of the canvas.
• REMOVE: overlapping pixels are removed by making them completely transparent.

The following blend modes are only available in 2D mode:

• DIFFERENCE: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive.
• OVERLAY: combines MULTIPLY and SCREEN. Dark values in the canvas get darker and light values get lighter.
• HARD_LIGHT: combines MULTIPLY and SCREEN. Dark values in the source get darker and light values get lighter.
• SOFT_LIGHT: a softer version of HARD_LIGHT.
• DODGE: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source.
• BURN: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result.

The following blend modes are only available in WebGL mode:

• SUBTRACT: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added.