Ad

How To Connect Multiple Bezier Curves?

- 1 answer

I'd like to draw a diagram using bezierCurveTo(). As far as I know, it is only possible to set 3 anchor points with 1 bezierCurveTo(). If I use multiple of them, I get an unsmooth line. How can I solve this?

<canvas id="myCanvas" width="600" height="150" style="border:1px solid #d3d3d3;"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(0, 150);
  context.bezierCurveTo(100, 0, 200, 100, 300, 20);
  context.bezierCurveTo(400, 0, 500, 100, 600, 20);
  
  context.strokeStyle = 'blue';
  context.stroke();
</script> 

Ad

Answer

This is a non-trivial problem. It depends on how much smoothness you would like to achieve (just connect tangents, or make curve radiuses in the connection point the same). The simplest way is shown on picture ([A3-X] / [X-B2] = [A3-A4] / [B1-B2]; start [A3-X] vector from A4 and [X-B2] from B1 to get A3x and B2x anchor points). enter image description here

But you could also have a look at D3 Shape module (e.g. Catmul Rom curve), it will generate you a Bezier spline from points it should go through. Or look at the algorithm somewhere.

Ad
source: stackoverflow.com
Ad