Drawing smooth lines with canvas

Question

So far none of the threads here on smooth lines are correct.

how to draw smooth curve through N points using javascript HTML5 canvas?

Smooth user drawn lines in canvas

Both result in jagged lines. By smooth I mean using the x,y points as control points to make the line smooth. The line does NOT need to go through the points. It simply has to draw a smooth line given n points.

Basically I'm recording each line segment, then when the user mouses up, it wil smooth the line.

I've tried my own method using bezierCurveTo but that only smooths every other point, and then the connecting points are harsh still. The internet seems to think what I'm looking for is called B-Spline curves. I tried applying a linear algebra matrix to the problem, but I failed at that lol.

Here is the best curve I can get, (image). The line in red is the "smoothed" line, as you can see it smooths every other point, but not continuous. This is using the code from

how to draw smooth curve through N points using javascript HTML5 canvas?

My code does the same thing

http://www.square-bracket.com/images/smoothlines.png

Thanks for your help!

Answer 1

You need to keep the same tangent in the points bellowing in the line. Check http://jsfiddle.net/FHKuf/4/.

Edit:

Sorry, just noticed your comment today. Just happened to be testing something related and remembered your question. It happens that in the past I did wrote some code to interpolate some lines. It is called Catmull-Rom(just a ref. that I googleed) it passes by the middle control points. I did changed the code to my test and thought that you may have some use to it. See at http://jsfiddle.net/FHKuf/6/.