Compute Overlap Color of two SVG Rects using Canvas

The overlap color is computed to be:

Explanation

Color picker in FireFox reports the SVG red square is: rgb(255,127,127) and the blue square is rgb(127,127,255) and the overlap is rgb(127,63,191). The canvas is the same. Note that in both images there is a single pixel border.

Notes

• This all started as a StackOverflow question!
• Information about the ImageData API from MDN