globalCompositeOperation example

In each column, your <canvas> is on the left, the expected image is on the right.

src (255,0,0,255)
dest (0,255,0,255)

src (255,0,0,255)
dest (0,255,0,0)

src (255,0,0,255)
dest (0,255,0,1)

src (0,255,0,0)
dest (255,0,0,255)

src (0,255,0,1)
dest (255,0,0,255)

src (255,0,0,0)
dest (0,255,0,255)

src (255,0,0,127)
dest (0,255,0,127)

src (255,0,0,255)
dest (0,255,0,127)

src (255,0,0,127)
dest (0,255,0,255)

src (127,0,0,255)
dest (0,127,0,127)

src (127,0,0,127)
dest (0,127,0,255)

src (255,0,0,127)
dest (255,0,0,63)

src (255,127,0,32)
dest (255,63,0,63)

src (255,0,0,191)
dest (0,255,0,127)

src (255,0,255,191)
dest (0,255,255,127)

source-over

destination-over

source-in

destination-in

source-out

destination-out

source-atop

destination-atop

xor

copy

lighter

darker [moz-saturate]

darker [almost safari]

darker [maybe safari]