title: how to create bezier curve in JavaScript?
body: <p>I am trying to create a bezier curve using JavaScript on a HTML5 canvas. Below is the code that I have written us in the drawbeziercurve function. The result is that, I only get the four points, but cant get the bezier curve to appear. Any help guys?</p>
  
  <pre><code>function drawBezierCurve() {
      "use strict";
      var t, i, x, y, x0, x1, x2, x3;
  
      //  for (t = 1; t &lt;= nSteps; t++) {
      //t = 1/nSteps
  
      q0 = CalculateBezierPoint(0, x0, x1, x2, x3);
  
      for(i = 0; i &lt;= nSteps; i++)
      {
          t = i / nSteps;
          q1 = CalculateBezierPoint(t, x0, x1, x2, x3);
          DrawLine(q0, q1);
          q0 = q1;
      }
  
      //[x] = (1-t)³x0 + 3(1-t)²tx1+3(1-t)t²x2+t³x3
      //[y] = (1-t)³y0 + 3(1-t)²ty1+3(1-t)t²y2+t³y3
  
      procedure draw_bezier(A, v1, v2, D)
          B = A + v1
          C = D + v2
  
          //loop t from 0 to 1 in steps of .01 
          for(t=0; t &lt;=1; t+ 0.1){
              a = t
              b = 1 - t
  
              point = A*b³ + 3*B*b²*a + 3C*b*a2 + D*a³  
  
              //drawpixel (point)
              drawLine(arrayX[0], arrayY[0], (arrayX[0] + arrayX[1] + arrayX[2] + arrayX[3]) / 4,
                  (arrayY[0] + arrayY[1] + arrayY[2] + arrayY[3]) / 4, 'blue');
  
              //end of loop
          }
  
      end of draw_bezier
  
      /*    drawLine(arrayX[0], arrayY[0], (arrayX[0] + arrayX[1] + arrayX[2] + arrayX[3]) / 4,
          (arrayY[0] + arrayY[1] + arrayY[2] + arrayY[3]) / 4, 'blue');
  
      drawLine((arrayX[0] + arrayX[1] + arrayX[2] + arrayX[3]) / 4, 
          (arrayY[0] + arrayY[1] + arrayY[2] + arrayY[3]) / 4, arrayX[3], arrayY[3], 'blue');   */
  }
  
  // points array
  </code></pre>