HTML5 canvas issue - opacity with paint application

Question

I am trying to program a drawing application using Canvas. the way it works is connecting lines when you click the mouse. when the line is opaque, it works well, but when I change the alpha parameter, I have a problem.

I tried two options:

but. The path begins when the mouse falls for the first time and ends when the mouse rises again: each movement of the mouse calls the stroke () function. because the line is transparent, the beginning of the whole path will become opaque, and the end will not be, because stroke () is called many times, and it drwas all the way over and over.

b. The path begins and ends with each mouse movement: the line is transparent along the entire path, but the coincidence point between each path and the path is less transparent (because they consist of two lines). therefore, the whole path is not hard.

the only way to get a good result is when I call stroke () only when the mouse rises again. then he strokes it well all the way, but I don’t see anything when drawing it.

What can I do?

thanks

Answer 1

I believe it is best to create a second overlay canvas that is positioned (using absolute positioning) over your main canvas.

While dragging and dropping for each mousemove event mousemove use clearRect () to clear the overlay canvas and then draw the entire move in the process.

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

Here is a live example:

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