Drawing overlapping semi-transparent lines without visible overlap

Question

I\'m developing a painter program using HTML5 canvas. I have created a drawing tool where the user drags and moves the mouse.

I have a listener on mousemove

Answer 1

(Restating your problem) Your original problem was that by calling beginPath() and stroke() for each segment you had many overlapping semi-transparent paths. Your new "problem" is that by creating all your lineTo() commands as part of the same path and then calling stroke() once at the end any self-intersecting paths intended by the user do not show a visible overlap.

Here is an example showing the difference between making

• many semi-transparent lines in a single path and stroking once (upper left), versus
• many semi-transparent lines in distinct paths and stroking each (bottom right)

                        http://jsfiddle.net/jhyG5/2/

I would say that your current solution (a single path) is the correct way to do it, even though a single self-crossing path does not double-up in opacity. This is what you see in Adobe Photoshop and Illustrator when drawing semi-transparent paths: all drawing with the mouse down is part of the same, single, non-overlapping transparent object. Only when the user releases and re-presses the mouse button do you accumulate more transparency:

• Two Photoshop paintbrush strokes at 50% opacity:
  

• Two Illustrator paths at 50% opacity:

Notice in particular that the self-intersecting stroke and path do not show double the opacity during crossing, but that a separate new path does.

I recommend that you stick with your current solution given that this is how these traditional, well-thought-out applications behave. I say this both because you want your package to mimic user expectations, and also because if these packages do it like this, there's probably a very good reason for it: the exact problem you originally had! :)