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