I have googled and googled about it, and all I can find, including on StackOverflow, is "support has been and has been broken in most major browsers." Not a real solution to my problem.
This month, Playboy appeared with two 3D glasses (red / blue) to view a popup. Naturally, I got on the Internet to find every red and blue anaglyph that I could and see how amazing they are. In the end, I found some animated GIF files, which led me to think that maybe I should do some cool HTML5 Canvas stuff that allows you to place shapes in a scene in 3D.
This is how far I got. Only works on Google Chrome. In Firefox, “Elevated Text” should look right, but not rectangles.
Thus, I generate a scene: there are layers, each of which contains a Z-index, and you can put a rectangle or some text on any layer that you want. The concept is simple. When drawing an object, he draws one [Z-index] pixels on the left in pure red color, then draws one [Z-index] pixels on the right in pure blue.
In theory, overlapping parts should be subtracted to become clean. In Chrome, this happens to fill rectangles, stroke text, but not to fill text. In Firefox, this happens only to stroke text.
Although the intended effect globalCompositeOperation="darker"should do exactly what I want, it is obvious that the descent along this road will only bring pain.
Does anyone have an idea on how I can get the effect I want without using it globalCompositeOperation? I tried messing with the alpha channel in colors, but I didn't really like the way they came together (they never add up to pure black). I could draw a third black rectangle between red and blue, but this does not solve the problem for text or arbitrary shapes.
I could do pixel rendering for a pixel in Javascript, but that just seems redundant. Any thoughts?