Source

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,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)
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]