title: Catmull-Rom Spline to Bezier Spline Converter
body: <p>I am trying to port the catmullRom2bezier function from <a href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js" rel="nofollow">snap.svg</a> to use with canvas
  (I am only using it for closed paths):</p>
  
  <pre><code>function catmullRom2bezier(pts){
      var cubics = [];
  
      for ( var i = 0, iLen = pts.length; i &lt; iLen ; i++ ){
  
          var p = [
              pts[i - 1],
              pts[i],
              pts[i + 1],
              pts[i + 2]
          ];
  
          if( i === 0 ){
              p[0] = {
                  x: pts[ iLen -1 ].x,
                  y: pts[ iLen -1 ].y
              }
          }
  
          if( i === iLen - 2 ){
  
              p[3] = {
                  x: pts[0].x,
                  y: pts[0].y
              };
  
          }
  
          if ( i === iLen - 1 ) {
  
              p[2] = {
                  x: pts[0].x, 
                  y: pts[0].y
              };
              p[3] = {
                  x: pts[1].x, 
                  y: pts[1].y
              };
  
          }
  
          cubics.push([
              (-p[0].x + 6 * p[1].x + p[2].x) / 6,
              (-p[0].y + 6 * p[1].y + p[2].y) / 6,
              (p[1].x + 6 * p[2].x - p[3].x) / 6,
              (p[1].y + 6*p[2].y - p[3].y) / 6,
              p[2].x,
              p[2].y
          ]);
  
      }
  
      return cubics;
  
  
  }
  </code></pre>
  
  <p>Here is how I am trying to use it:</p>
  
  <pre><code>ctx.beginPath();
  
  var cubics = catmullRom2bezier(points);
  
  for( var i = 0; i &lt; cubics.length; i++ ){
      ctx.bezierCurveTo(cubics[i][0],cubics[i][1],cubics[i][2],cubics[i][3],cubics[i][4],cubics[i][5]);
  }
  
  ctx.fill();
  </code></pre>
  
  <p>But I must be missing something for it to work because the resulting path is not completely rounded.</p>