HTML5 Canvas - lines self-intersection with alpha-channel

Please look at the picture (sorry, new users can't insert an image directly into post). Lines ar开发者_开发技巧e drawn semi-transparent colors (alpha = 0.5). When the red line crosses itself, the double overlay translucent colors does not occur. At the same time, separate the green line superimposed on the red as it should. It can be concluded that the lines are drawn on canvas is not linear, as well as the whole area. I think this is incorrect behavior.

Live demo: jsfiddle.net/dom1n1k/xb2AY/

I will not ask how to fix it :) The question is ideological: how do you think about this behavior?

1. This is logical and it should be;
2. This is not logical, but if it happened - we assume that feature;
3. Canvas work that way for technological reasons - the implementation is simpler.
4. This is an obvious bug, and the authors of browsers should fix it.

P.S. Sorry for my bad english.

---

Great question! The spec writer (and I) believe that the answer is:

1. This is logical and it should be;

Lets explore the reasoning for this.

You are not drawing separate lines when you draw the red path. You are drawing an entire path, and an entire path is drawn all at once and stroked all at once, and the color of the path cannot "overlap" itself. This is intentionally defined by the specification. It reads:

Since the subpaths are all stroked as one, overlapping parts of the paths in one stroke operation are treated as if their union was what was painted.

If you wanted to get an overlay effect you could simply use multiple paths, as you do by adding the green line. So you can easily do it the other way when necessary.

You should consider this feature a good thing: If the Canvas spec were to require each subpath of the path to cause an additional overlay then the corners of every path (where each line is joined) would look horrible! (see the red connections here for an example of what each corner would look like)

Since having the path overlap on the crosses also means it would overlap on every corner, the specification decides to only use the union'd path when stroking, which keeps normal-looking corners as the expected default (I think most people would expect them to look as they do, not to look as I showed). If the lines were overlaid on the crossings but not every corner then it would not be a consistent rule, which makes it much harder to learn and work around.

So the reasoning is clear I hope. The specification has to give us 3 things, usually in this order: The most-common expected output (corners look as they do), consistency (if we overlaid on line crosses we'd also be doing it on corners, so we shouldn't do it), and ease of understanding.

A good specification is always consistent. If something is consistent then it is more learnable, which makes it easier to understand once you know why something is done that way.