Invalid blending results across all browsers with HTML5 canvas

Question

Summary

When repeatedly drawing anything (apparently with a low alpha value) on a canvas, regardless of if it\'s with drawImage() or a fill

Answer 1

Setting globalCompositeOperation to "lighter" (the operation where overlapping pixels values are added together, it is not the default operation for many browsers) yields same color and results in ie9, chrome 14 and latest firefox aurora:

Expected: [126.99999999999999, 0, 0, 63.51372549019608]
Result: [127, 0, 0, 64]

Expected: [126.99999999999999, 0, 0, 63.51372549019608]
Result: [127, 0, 0, 64]

http://jsfiddle.net/jMjFh/11/

edit: you may learn what the different composite operations mean here:

https://developer.mozilla.org/en/Canvas_tutorial/Compositing#globalCompositeOperation

for example, "copy" was useful to me when I needed to do fade animation in certain parts of a canvas