Overlay overlapping translucent lines without visible overlap

Question

I am developing a paint program using an HTML5 canvas. I created a drawing tool in which the user drags and moves the mouse.

I have a listener on a mousemove event that draws short lines:

 Painter.mainCanvas.beginPath(); Painter.mainCanvas.moveTo(Painter.lastX, Painter.lastY); Painter.lastX = e.offsetX; Painter.lastY = e.offsetY; Painter.mainCanvas.lineTo(Painter.lastX, Painter.lastY); Painter.mainCanvas.stroke(); 

Everything worked fine until I set the global alpha to <1. When using this method to draw, the endpoint also starts with a dot. Thus, the point is drawn twice. And since we have a transparent color, the dot now has a different color with different dots in the row.

I tried another method when when running mousemove it uses lineTo() and stroke() when mouseup fires.

This solves the double-drawing problem, but also introduces a new problem: when the user intends to draw the same point twice, i.e. cross line without mouse, the point will not be displayed twice. Since the lineTo() function will not draw a point twice without an interval between them.

Answer 1

(Repeating your problem). The original problem was that by calling beginPath() and stroke() for each segment, you had many overlapping translucent 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 for the user do not show visible overlap.

Here is an example showing the difference between creating

• many translucent lines in one path and stroking once (upper left), compared to
• a lot of translucent lines in separate tracks and stroking each (bottom right)

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

I would say that your current solution (the only way) is the right way to do this, although one way of self-intersection does not increase in opacity. This is what you see in Adobe Photoshop and Illustrator when drawing translucent paths: the entire drawing with the mouse down is part of the same opaque transparent object. Only when the user releases and clicks the mouse button again do you accumulate more transparency:

• Two Photoshop brush strokes with 50% opacity:
  

• Two Illustrator paths with 50% opacity:

Note in particular that the self-intersecting move and path do not show double opacity during crossing, but this makes a separate new path.

I recommend that you stick to your current decision, given that these traditional, well-thought-out applications behave this way. I'm talking about this both because you want your package to mimic the expectations of users, and also because if these packages do it like that, there is probably a very good reason for this: the exact problem you originally had! :)