HTML5 canvas - opacity problem with a paint app

Question

I'm trying to program a paint application using Canvas. the way it works is by connection lines when the mouse is pressed. when the line is opaque it works well, but when I change the alpha parameter I get a problem.

I tried two options:

a. The path begins when the mouse is down for the first time and ends when the mouse is up again: every move of the mouse calls the stroke() function. because the line is transparent the beginning of the whole path will become opaque and the end won't, because stroke() is called many times, and it drwas the whole path again and again.

b. The path begins and ends every move of the mouse: the line is transparent through the whole way, but the matching point between every path and path are less transparent (because they're made of two lines). so the whole path is not solid.

the only way I get a good result is when I call stroke() only when the mouse is up again. then it strokes the whole path well, but I see nothing while actually drawing it.

what can I do?

thanks

Answer 1

I think your best bet is to create a second overlay canvas that is positioned (using absolute positioning) over your primary canvas.

During a mouse drag, for every mousemove event use a clearRect() to clear your overlay canvas and then draw the entire stroke-in-progress.

When you get a mouseup, clear the overlay and draw the entire stroke to the primary canvas.

Here's a live example:

http://jsfiddle.net/rnNFB/1/