javascript - HTML5 Canvas: How to fake globalCompositeOperation="darker" -

I have googled and googled about this, and all I can get, including StackOverflow, is "Support was broken and In the biggest browsers, there is no real solution to my problem.

Playboy eye-popping centerfold this month came with a pair of 3D glasses (red / cyan) to watch. Naturally, I could hit the Internet to find every red / cyan anaglyph and see how terrible they are. After all, I got some animated GIF, who led the idea that I should probably make some cool HTML5 canvas stuff so that you can put shapes on any scene in 3D.

Only works well in Google Chrome, in Firefox, "advanced text" should look correct, but no rectangle.

The way I am generating the visuals is as follows: Each layer has a Z index, and you can take place, a rectangle or some text concept on the layer you want is simple While drawing an object, it draws a [Z-index] pixel on the left, pure red, then it pulls a [Z-index] pixel right in the right cyan.

In theory, the overlapping parts should be reduced to becoming pure black. In Chrome, this is to fill the rectangles, to text the text, but not to fill the text. In Firefox, it only happens to stroke the text.

However the desired effect of globalCompositeOperation = "darker" should do what I want, it is clear that this road is going down to nothing but to bring pain .

Is anyone here an idea how can I get the effect without using globalCompositeOperation ? I tried to mess with the alpha channel on the colors but in reality it was not how they came together (they never add to pure black). I can draw a third black rectangle between the red and cyan ones, but it does not solve the problem for text or arbitrary shapes.

I can provide myself a pixel-of-pixel in JavaScript, but it seems like just above any thoughts?