Summary -
In this topic, we described about the Draw Bezier with detailed example.
In html5 canvas, the bezierCurveTo() technique adds a point to the present direction by applying the specified control points that correspond to a cubic Bezier curve.
A cubic Bezier curve involves three points. The initial two points are control points that are utilized in the cubic Bezier computation and the final point is the ending point for the curve.
The beginning point for the curve is the final point in the present path. If a path does not exist, apply the beginPath() and moveTo() techniques to describe a beginning point.
Syntax -
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
The following table describes parameter values of the bezierCurveTo() method -
| Parameter | Description |
|---|---|
| cp1x | The x-coordinate of the initial Bezier control point |
| cp1y | The y-coordinate of the initial 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 |
To draw Bezier corves on the canvas we need the following methods -
| Method | Description |
|---|---|
| beginPath() | This method resets the present path. |
| moveTo(x, y) | This method establishes a new subpath with the provided point. |
| closePath() | This method indicates the existing subpath as closed and begins a new subpath with a point that is same as the ending of the recently closed subpath. |
| fill() | fills the subpaths with the present fill style. |
| stroke() | strokes the subpaths with the present stroke style. |
| bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) | This method enhances the given point to the present path,linked to the earlier one by a cubic Bezier curve with the provided control points.The x and y parameters are the coordinates of the end point in bezierCurveTo() method.cp1x and cp1y are the coordinates of the first control point,and cp2x and cp2y are the coordinates of the second control point. |
Example -
The below example describes how to draw a Bezier curves using the above methods.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="300" height="150"
style="border:1px solid #00d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
ctx.beginPath(); ctx.moveTo(40, 40);
ctx.bezierCurveTo(40,100,-50,100,200,40);
ctx.stroke();
</script>
</body>
<html>
Output -
Browser Support
The bezierCurveTo() method supports all modern browsers, such as Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.