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

by

The problem with joining subsequent sample points together with disjoint “curveTo” type functions, is that where the curves meet is not smooth. This is because the two curves share an end point but are influenced by completely disjoint control points. One solution is to “curve to” the midpoints between the next 2 subsequent sample points. Joining the curves using these new interpolated points gives a smooth transition at the end points (what is an end point for one iteration becomes a control point for the next iteration.) In other words the two disjointed curves have much more in common now.

This solution was extracted out of the book “Foundation ActionScript 3.0 Animation: Making things move”. p.95 – rendering techniques: creating multiple curves.

Note: this solution does not actually draw through each of the points, which was the title of my question (rather it approximates the curve through the sample points but never goes through the sample points), but for my purposes (a drawing application), it’s good enough for me and visually you can’t tell the difference. There is a solution to go through all the sample points, but it is much more complicated (see http://www.cartogrammar.com/blog/actionscript-curves-update/)

Here is the the drawing code for the approximation method:

// 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);

More Related Contents:

  1. How to clear the canvas for redrawing
  2. Real mouse position in canvas
  3. HTML5 Canvas Resize (Downscale) Image High Quality?
  4. Resize image with javascript canvas (smoothly)
  5. CanvasContext2D drawImage() issue [onload and CORS]
  6. Why is requestAnimationFrame better than setInterval or setTimeout
  7. HTML5 Canvas camera/viewport – how to actually do it?
  8. Capture frames from video with HTML5 and JavaScript
  9. I want to do animation of an object along a particular path
  10. How can I stop the alpha-premultiplication with canvas imageData?
  11. Draw border around nontransparent part of image on canvas
  12. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  13. addEventListener for keydown on Canvas
  14. Load image from url and draw to HTML5 Canvas
  15. Canvas image masking / overlapping
  16. Save canvas as jpg to desktop [duplicate]
  17. How to pixelate an image with canvas and javascript
  18. HTML canvas – drawing disappear on resizing
  19. Draw HTML5/Javascript Canvas Path in Time
  20. Saving canvas to image via canvas.toDataURL results in black rectangle
  21. Resize a Base-64 image in JavaScript without using canvas
  22. canvas getContext(“2d”) returns null
  23. clearing circular regions from HTML5 Canvas
  24. How to detect shape on a transparent canvas?
  25. HTML5 Canvas API – formatting individual words with italics
  26. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  27. How can I animate the drawing of text on a web page?
  28. Scaling an image to fit on canvas
  29. True Isometric Projection with HTML5 Canvas
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment