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

Here is the code for drawing curve from N points:

// move to the first point
ctx.moveTo(points[0].x, points[0].y);

for (i = 1; i < points.length - 2; i ++)
var xc = (points[i].x + points[i + 1].x) / 2;
var yc = (points[i].y + points[i + 1].y) / 2;
ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);

// curve through the last two points
ctx.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x,points[i+1].y);


Popular posts from this blog

About 12 Alwars

Post thumbnails from external URLs don’t appear in Blogger. How to resolve?

What is the unicode character for the close symbol?

ஸ்தல விசேஷம் - திருக்கோவிலூர் திவ்யதேசம்