3

Please look at the picture (sorry, new users can't insert an image directly into post). Lines are 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.

dom1n1k
  • 31
  • 2

1 Answers1

3

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.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • "If the Canvas spec were to require each subpath of the path to cause an additional overlay then the corners of every path would look horrible!" - Yes, I understand it. I think it should not be separate subpaths. This is one solid path and normal corners. But this is not an area that is filled with color. This is a linear object. Imagine how the pen draws on the paper. One continuous motion. Its color may overlap on itself? – dom1n1k Sep 27 '11 at 16:45
  • You have to think of it from a "I construct a path line-by-line" perspective. When you write an L with a pen you might not expect any overlap. What if you write a V? What if you write a really narrow V? What if you write a V so narrow that its just two lines on top of each other? It's a problem what you call a corner and what you don't. To keep it consistent, they decided to treat everything the same. – Simon Sarris Sep 27 '11 at 17:12