HTML Canvas RGBA stroking

Question

I am learning canvas and my goal is to draw free-hand. Every example online says that I should call stroke() within my onmousemove. This works as expected if my color strokeStyle has 100% opacity. However if I use rgba with 0.3 alpha value, then calling stroke() over and over again re-colors the entire path, thus eventually forcing the line to be opaque.

I tried overcoming this by drawing a line, stopping the path, and starting a new one. This worked half way -- the overlapping part of the path would be twice as dark -- which is very problematic if you are using a thick line width.

Lastly -- I moved stroke() to onmouseup -- and this works great except that the user cannot see what he's drawing until he releases the mouse.

How can I address this?

Answer 1

One way to address this is to remember each and every mousemove coordinate and put them in a list. On each mousemove, you clear the canvas and redraw the entire path plus-the-newest-point onto the canvas.

This will make it look nice like you want.

Here you go:

http://jsfiddle.net/sQLSp/

If you want the canvas to persist between lines you will want to save it to an in-memory canvas at each mouse-up and repaint it at each step. If you want to see what that looks like, see here:

http://jsfiddle.net/sQLSp/3/

Edit: Example modified for doing it the Opera-tutorial way: http://jsfiddle.net/2vAQE/