CODEWITHSUNDEEP
html5-canvas
kuroi neko
kuroi neko

Reputation: 8661

Where are the specs of HTML canvas globalCompositeOperation modes?

I've been wading through terabytes of erudite essays on various aspects of canvas blending modes lately, and even found beautiful test pages like this one.

However, I could only find the vaguest description of what the different modes do, on a pixel-per-pixel basis, including the way alpha channel is used either in selecting src/dest pixels or in combining src/dest values.

Could a kind soul point me to a reliable source?

Upvotes: 0

Views: 73

Answers (1)

Philipp
Philipp

Reputation: 69663

Formal specifications for the HTML5 canvas 2d context are published by the WhatWG and the World Wide Web Consortium.

The WhatWG references a separate spec for the composite operation values.

The W3 defines it as follows:

source-atop
    A atop B. Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere.
source-in
    A in B. Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere.
source-out
    A out B. Display the source image wherever the source image is opaque and the destination image is transparent. Display transparency elsewhere.
source-over (default)
    A over B. Display the source image wherever the source image is opaque. Display the destination image elsewhere.
destination-atop
    B atop A. Same as source-atop but using the destination image instead of the source image and vice versa.
destination-in
    B in A. Same as source-in but using the destination image instead of the source image and vice versa.
destination-out
    B out A. Same as source-out but using the destination image instead of the source image and vice versa.
destination-over
    B over A. Same as source-over but using the destination image instead of the source image and vice versa.
lighter
    A plus B. Display the sum of the source image and destination image, with color values approaching 255 (100%) as a limit.
copy
    A (B is ignored). Display the source image instead of the destination image.
xor
    A xor B. Exclusive OR of the source image and destination image.
vendorName-operationName
    Vendor-specific extensions to the list of composition operators should use this syntax.

Upvotes: 1

Related Questions