CanvasBlendMode.md

CanvasBlendMode

Kind: global class
Npmpackage:

• CanvasBlendMode
  • new CanvasBlendMode()
  • .NONE : string
  • .UNDER : string
  • .SOURCE_IN : string
  • .SOURCE_OUT : string
  • .SOURCE_ATOP : string
  • .DEST_IN : string
  • .DEST_OUT : string
  • .DEST_ATOP : string
  • .XOR : string
  • .COPY : string
  • .ADD : string
  • .DARKEN : string
  • .LIGHTEN : string
  • .OVERLAY : string
  • .MULTIPLY : string
  • .SCREEN : string
  • .DODGE : string
  • .BURN : string
  • .HARD : string
  • .SOFT : string
  • .DIFFERENCE : string
  • .EXCLUSION : string
  • .HUE : string
  • .SATURATION : string
  • .COLOR : string
  • .LUMINOSITY : string

new CanvasBlendMode()

Import from ad-canvas

import { CanvasBlendMode } from 'ad-canvas'

See also http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp and here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

WARNING: If you try to apply a blend mode of any kind (masking) to a CanvasImage whose source is an SVG, it will not render properly in FireFox. This is a known browser issue

• Try drawing the SVG into a dummy canvas and then use that dummy canvas as the image source in place of the SVG for your masking
• Use a PNG instead

DEFAULT / PLACEMENTS:

• NONE
• UNDER

MASKING BLENDS:
Use the existing canvas drawings to act as the mask to the given drawing with this mode:

• SOURCE_IN
• SOURCE_OUT
• SOURCE_ATOP

Use the given drawing with this mode to act as the mask to existing canvas drawings:

• DEST_IN
• DEST_OUT
• DEST_ATOP

Miscellaneous:

• XOR
• COPY

UNIVERSAL BLEND MODES:

• ADD

NOT SUPPORTED BY THESE BROWSER VERSIONS AND EARLIER:
Internet Explorer, Edge 12, Opera Mini 8, Android Browser 4.3:

• DARKEN
• LIGHTEN
• OVERLAY
• MULTIPLY
• SCREEN
• DODGE
• BURN
• HARD
• SOFT
• DIFFERENCE
• EXCLUSION
• HUE
• SATURATION
• COLOR
• LUMINOSITY

CanvasBlendMode.NONE : string

Represents 'source-over'. Displays the source content over the destination content. This is the default setting.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.NONE

CanvasBlendMode.UNDER : string

Represents 'destination-over'. Displays the destination content over the source content.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.UNDER

CanvasBlendMode.SOURCE_IN : string

Represents 'source-in'. Displays the source content within the destination content. Only the part of the source content that is INSIDE the destination content is shown, and the destination content is transparent.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.SOURCE_IN

CanvasBlendMode.SOURCE_OUT : string

Represents 'source-out'. Displays the source content outside of the destination content. Only the part of the source content that is OUTSIDE the destination content is shown, and the destination content is transparent.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.SOURCE_OUT

CanvasBlendMode.SOURCE_ATOP : string

Represents 'source-atop'. Displays the destination content on top of the source content. The part of the destination content that is outside the source content is not shown.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.SOURCE_ATOP

CanvasBlendMode.DEST_IN : string

Represents 'destination-in'. Displays the destination content within the source content. Only the part of the destination content that is INSIDE the source content is shown, and the source content is transparent.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.DEST_IN

CanvasBlendMode.DEST_OUT : string

Represents 'destination-out'. Displays the destination content outside of the source content. Only the part of the destination content that is OUTSIDE the source content is shown, and the source content is transparent.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.DEST_OUT

CanvasBlendMode.DEST_ATOP : string

Represents 'destination-atop'. Displays the destination content on top of the source content. The part of the destination content that is outside the source content is not shown.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.DEST_ATOP

CanvasBlendMode.XOR : string

Represents 'xor'. Only areas where the destination content and source content do not overlap are displayed. The parts that do overlap are not shown.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.XOR

CanvasBlendMode.COPY : string

Represents 'copy'. Displays the source content. The destination content is ignored.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.COPY

CanvasBlendMode.ADD : string

Represents 'lighter'. Where both shapes overlap, the color is values are added together.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.ADD

CanvasBlendMode.DARKEN : string

Represents 'darken'. Retains the darkest pixels of both layers.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.DARKEN

CanvasBlendMode.LIGHTEN : string

Represents 'lighten'. Retains the lightest pixels of both layers.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.LIGHTEN

CanvasBlendMode.OVERLAY : string

Represents 'overlay'. A combination of multiply and screen. Dark parts on the base layer become darker, and light parts become lighter.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.OVERLAY

CanvasBlendMode.MULTIPLY : string

Represents 'multiply'. The pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.MULTIPLY

CanvasBlendMode.SCREEN : string

Represents 'screen'. The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.SCREEN

CanvasBlendMode.DODGE : string

Represents 'color-dodge'. Divides the bottom layer by the inverted top layer.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.DODGE

CanvasBlendMode.BURN : string

Represents 'color-burn'. Divides the inverted bottom layer by the top layer, and then inverts the result.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.BURN

CanvasBlendMode.HARD : string

Represents 'hard-light'. A combination of multiply and screen like overlay, but with top and bottom layer swapped.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.HARD

CanvasBlendMode.SOFT : string

Represents 'soft-light'. A softer version of hard-light. Pure black or white does not result in pure black or white.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.SOFT

CanvasBlendMode.DIFFERENCE : string

Represents 'difference'. Subtracts the bottom layer from the top layer or the other way round to always get a positive value.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.DIFFERENCE

CanvasBlendMode.EXCLUSION : string

Represents 'exclusion'. Like difference, but with lower contrast.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.EXCLUSION

CanvasBlendMode.HUE : string

Represents 'hue'. Preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.HUE

CanvasBlendMode.SATURATION : string

Represents 'saturation'. Preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.SATURATION

CanvasBlendMode.COLOR : string

Represents 'color'. Preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.COLOR

CanvasBlendMode.LUMINOSITY : string

Represents 'luminosity'. Preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.

Kind: static constant of CanvasBlendMode
Example

CanvasBlendMode.LUMINOSITY