HTML5 Canvas Reference - bezierCurveTo()
The cubic Bezier curve offers more options because we have two control points to work with. The result is that curves-such as the classic "S" curve:
The bezierCurveTo() method adds a point to the current path to draw a bezier curve.
A cubic bezier curve requires three points.
The first two points are control points that are used in the cubic Bezier calculation.
The last point is the ending point for the curve.?
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
bezierCurveTo() |
Yes | Yes | Yes | Yes | Yes |
JavaScript syntax:
context.bezierCurveTo(controlPoint1x,controlPoint1y,controlPoint2x,controlPoint2y,x,y);
Parameter Values
| Parameter | Description |
|---|---|
| controlPoint1x/controlPoint1y | The x/y-coordinate of the first Bezier control point |
| controlPoint2x/controlPoint2y | The x/y-coordinate of the second Bezier control point |
| x/y | The x/y-coordinate of the ending point |
Example
The following code shows how to use bezierCurveTo from canvas context.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();<!-- ww w .ja v a2 s. c om-->
ctx.moveTo(20,20);
ctx.bezierCurveTo(20, 100, 150, 100, 150, 20);
ctx.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code connects bezier curve with lines.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
<!-- www . ja v a 2 s. c o m-->
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20, 100, 150, 100, 150, 20);
ctx.moveTo(20,20);
ctx.lineTo(20, 100);
ctx.lineTo(150, 100);
ctx.lineTo(150, 20);
ctx.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
Example 3
The following code shows how to create your own bezier function.
<!DOCTYPE html>
<html>
<body>
<script type='text/javascript'>
bezier = function(t, p0, p1, p2, p3){
var cX = 3 * (p1.x - p0.x),
bX = 3 * (p2.x - p1.x) - cX,<!-- w w w. j a v a2 s.co m-->
aX = p3.x - p0.x - cX - bX;
var cY = 3 * (p1.y - p0.y),
bY = 3 * (p2.y - p1.y) - cY,
aY = p3.y - p0.y - cY - bY;
var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;
return {x: x, y: y};
},
(function(){
var accuracy = 0.01, //the bezier 100 segments
p0 = {x: 10, y: 10},
p1 = {x: 50, y: 100},
p2 = {x: 150, y: 200},
p3 = {x: 200, y: 75},
ctx = document.createElement('canvas').getContext('2d');
document.body.appendChild(ctx.canvas);
ctx.moveTo(p0.x, p0.y);
for (var i=0; i<1; i+=accuracy){
var p = bezier(i, p0, p1, p2, p3);
ctx.lineTo(p.x, p.y);
}
ctx.stroke()
})()
</script>
</body>
</html>
The code above is rendered as follows:
Example 4
The following code shows how to draw a cloud.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas= document.getElementById('canvas');
var context = canvas.getContext('2d');
<!--from w w w . j a v a 2s .com-->
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(13, 100, 130, 150, 230, 150);
context.bezierCurveTo(25, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
Example 5
The following code shows how to draw a multi segment curve.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas= document.getElementById('canvas');
var context = canvas.getContext('2d');
<!-- w w w . j av a2s .c o m-->
context = canvas.getContext("2d");
// A2. CURVES.
// xS yS xC1 yC1 xC2 yC2 xE yE color
drawCurve( 15, 15, 150, 150, 50, 50, 100, 100, "green" );
drawCurve(100, 100, 175, 175, 75, 175, 190, 190, "blue" );
drawCurve( 15, 150, 100, 50, 50, 120, 60, 125, "red" );
drawCurve( 60, 125, 175, 175, 75, 175, 80, 190, "orange");
drawCurve(175, 125, 100, 150, 75, 100, 150, 100, "purple");
drawCurve(150, 10, 200, 125, 100, 175, 190, 150, "pink" );
function drawCurve(xStart, yStart,
xControl1, yControl1,
xControl2, yControl2,
xEnd, yEnd,
color)
{
// B1. ATTRIBUTES.
context.strokeStyle = color;
context.lineWidth = 9;
context.lineCap = "round"
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 5;
context.shadowColor = "gray";
// B2. STARTING point.
context.beginPath();
context.moveTo(xStart, yStart);
// B3. BEZIER curve.
context.bezierCurveTo(xControl1, yControl1,
xControl2, yControl2,
xEnd, yEnd);
// B4. DRAW curve.
context.stroke();
}
</script>
</body>
</html>
The code above is rendered as follows: