JavaScript Canvas BezierCurveTo

Introduction

The bezierCurveTo() method is one of the CanvasRenderingContext2D interface's path drawing methods. It allows for drawing cubic Bezier curves between two points. Bezier curves are parametric curves that are defined by a set of control points. Using bezierCurveTo(), you can draw smooth curves with varying degrees of curvature.

Syntax

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

Parameters

• cp1x: The x-coordinate of the first control point.
• cp1y: The y-coordinate of the first control point.
• cp2x: The x-coordinate of the second control point.
• cp2y: The y-coordinate of the second control point.
• x: The x-coordinate of the end point of the curve.
• y: The y-coordinate of the end point of the curve.

Example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.bezierCurveTo(50, 100, 200, 100, 200, 50);
ctx.stroke();

This example draws a cubic Bezier curve with a starting point at (50,50) and an end point at (200,50). The two control points are located at (50,100) and (200,100) respectively.

Conclusion

In conclusion, the bezierCurveTo() method is a powerful tool that can be used to draw smooth curves in the Canvas element of an HTML5 document. By specifying the control points, you can adjust the degree of curvature of the curve. This method is essential for graphic designers and other professionals who work with vector graphics.