bezierCurveTo method

Adds a point to the current subpath by using the specified control points that represent a cubic Bézier curve.

Internet Explorer 9

Syntax

CanvasRenderingContext2D.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

Parameters

cp1x [in]

Type: number

The x-coordinate of the first Bézier control point.

cp1y [in]

Type: number

The y-coordinate of the first Bézier control point.

cp2x [in]

Type: number

The x-coordinate of the second Bézier control point.

cp2y [in]

Type: number

The y-coordinate of the second Bézier control point.

x [in]

Type: number

The x-coordinate of the point to add to the current path.

y [in]

Type: number

The y-coordinate of the point to add to the current path.

Return value

This method does not return a value.

Remarks

A cubic Bézier curve must include three points. The first two points are control points that are used in the cubic Bézier calculation and the last point is the ending point for the curve. The first point on the curve is the last point in the existing current subpath. If a path does not exist, use the beginPath and moveTo methods to create a starting point.

Examples

The following code example draws a Bézier curve between two points. It also draws a reference line to display the deviation of the curve over a straight line between the beginning and ending points.

Result output of code sample showing a single sine wave line.


<!DOCTYPE html> 
<html>
  <head>
    <title>BezierCurveTo example</title>
    
  </head>
    <body>
        <canvas id="demo" width="400" height="400">This browser or document mode doesn't support canvas</canvas>
      <script>
        var canvas = document.getElementById("demo")
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          // Draw a straight reference line.
          ctx.beginPath();
          ctx.strokeStyle = "blue";
          ctx.moveTo(100, 100);
          ctx.lineTo(300, 100);
          ctx.stroke();
          // Draw a Bézier curve by using the same line cooridinates.
          ctx.beginPath();
          ctx.lineWidth = "3";
          ctx.strokeStyle = "black";
          ctx.moveTo(100, 100);
          ctx.bezierCurveTo(200, 200, 200, 0, 300, 100);
          ctx.stroke();
        }
      </script>
    </body>
</html> 


See also

CanvasRenderingContext2D
quadraticCurveTo

 

 

Show:
© 2014 Microsoft