HTML5 Canvas-Drawing Bezier Curves HTML 5

What is use of drawing Bezier curves in HMTL5?

Below methods are used for drawing bezier on the canvas

Sr.No.

Method and Description

1

beginPath()

beginPath() method is used to reset the current path.

2

moveTo(x, y)

moveTo(x, y) method is used to create a new sub path with a given point.

3

closePath()

closePath() method is used for marking the current sub path as closed, and starts a new sub path with a point same as the start and end of the newly closed sub path.

4

fill()

fill() method is used to fill the sub paths with the current fill style.

5

stroke()

stroke() method is used to stroke the sub paths with current stroke style.

6

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method is used to add the given point to the current path, connected to the previous one by a cubic Bezier curve with the given control points.

Here x and y parameters in bezierCurveTo() method are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.

Example

Below is a simple example to draw a Bezier curves.

Output

bezier curve

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics