Question

I’m having a little problem with drawn lines on a canvas,

Basically I want the lines to be nice and soft and semi opaque however the canvas only seems to want to do this with last rendered line segment.

Have a look here, you will see that the last line segment drawn is nice and.. well how I want it) however as the animation plays, the lines drawn prior get all jaggy and nasty.

I’ve noticed that if i use closepath this doesn’t happen however, because of the interval/animation i cant use this each render as the line goes all over the place:

http://jsfiddle.net/xSPuM/1/

anyone have any ideas on how to stop this happening, i’d be very grateful.

Thanks very much
A

Answer 1

Strange code! The animation is neat though the way of doing this seems a bit unique, so lets take a look.

First just to be completely clear, when you are making a path you can continue to stroke it over and over.

So if you have a path with three line segments A,B,C and you do:

A, stroke, B, stroke, C, stroke

You will get segment A stroked 3 times, B stroked 2 times and C stroked once.

This is essentially what you’re doing here.

You can avoid that easily by stroking only once at the end of your path:

http://jsfiddle.net/xSPuM/5/

This stops the animation but illustrates what the problem is. You can fix the animation by clearing the screen. So with segments ABC we’d be doing:

A, clear, stroke, B, clear, stroke, C, clear, stroke

Then you’d get segment A stroked once, the screen is cleared and then segment A-B stroked once and the screen is cleared a final time so segment A-B-C gets stroked once. This is what you want.

The problem with this is that clearing the screen means clearing all your previously drawn shapes! See here:

http://jsfiddle.net/xSPuM/7/

There are a few ways to fix this:

1. Save the object currently being drawn on a temporary canvas (might be tricky)
2. Save the previously drawn state to a temporary canvas (less tricky)
3. Keep track of the three paths as if they were one path (easy peasy so I’ll do it for you)

To do #3 all we gotta do is not call beginPath at the start of each new part. Instead we only call beginPath just once at the very start, and each new part is simply a moveTo operation!

http://jsfiddle.net/xSPuM/8/

That should be enough info to get you on the right track!