Dashed BezierCurve

by Timothy Kanski

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

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

      context.setLineDash([5, 15]);

      context.beginPath();
      context.moveTo(100, 20);

      // bezier curve
      context.bezierCurveTo(290, -40, 300, 200, 400, 150);

      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
      
      // second half of curve
      context.beginPath();
      context.strokeStyle="#DDDDFF";
      context.bezierCurveTo(400, 150, 500, 120, 450, 20);
      context.stroke();