Code Explanation for bezierCurveTo() method in HTML5 Canvas:
“wikitechyCanvas” is declared the id value of the HTML canvas.
The getElementById(); method is used to get the element with the specific id (“wikitechycanvas”).
The beginPath() method begins a path for Bezier curve.
The moveTo() method is used to move the path to the point(40,40) in the canvas.
The beziercurveTo() requires three points. The first two points are control points (40,200) (250,200) that are used in the cubic Bezier calculation and the last point (250,40) is the ending point for the curve. The starting point for the curve is the last point in the current path.
The stroke() method to actually draw the path on the canvas.
Output for bezierCurveTo() method in HTML5 Canvas:
The HTML rectangle canvas with blue color border.
The Bezier curve is displayed on HTML canvas.
Output Coordinate Explanation for bezierCurveTo() method in HTML5 Canvas:
Start point(40,40)
Control point 1(40,200)
Control point 2(250,200)
End point (250,40)
Browser Support for bezierCurveTo() method in HTML5 Canvas: