Canvas Bezier Curve

The bezierCurveTo() function is used to created cubic Bezier curve form one point to another point. It has two control points such as bezierCurveTo(x1,y1,x2,y2,x,y) where x1 and y1 are the initial control points and x2 and y2 are the second control points and x and y are the end points of bezier curve.

Syntax

var variableName = canvas.getContext(2d);
variableName.bezierCurveTo(x1,y1,x2,y2,x,y);

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <canvas> element to draw canvas on webpage
• Assign id <curve> to canvas element
• Give width and height of 200 200 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 3px solid green
• Use javascript to draw any bezier curve on canvas by using bezierCurveTo method

save file with name task.html or task.htm and then open it using any browser and see results.