bezierCurveTo() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:bezierCurveTo

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. bezierCurveTo

Description

The bezierCurveTo() method sets control points for a cubic Bezier curve.

A cubic bezier curve requires three points.

The first two points are control points that are used in the cubic Bezier calculation and the last point is the ending point for the curve.?

JavaScript syntax 


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

Parameter Values

Parameter Description
cp1x The x-coordinate of the first Bezier control point
cp1y The y-coordinate of the first Bezier control point
cp2x The x-coordinate of the second Bezier control point
cp2y The y-coordinate of the second Bezier control point
x The x-coordinate of the ending point
y The y-coordinate of the ending point

Example

Draw a cubic Bezier curve:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();/*from  ww  w  . j a va  2 s .c o m*/
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 130, 210, 20);
ctx.stroke();

</script>

</body>
</html>

Related Tutorials