HTML Canvas Draw Bezier Curve
Last Updated :
09 Jun, 2023
Curves on HTML canvas can be drawn using arcs, but drawing a complex diagram using arcs is quite a tedious task. In the given circumstance, Bezier curve will be very useful in providing more flexibility in drawing curves. Bezier curves on HTML canvas are drawn using a start point, one or more control point/points and an endpoint. Example: In the case of drawing a landscape, real-world objects, irregular shapes etc. Bezier Curves can be drawn in two ways:
- Quadratic Bezier Curve
- Cubic Bezier Curve
Quadratic Bezier Curve: This curve is controlled by one control point. Syntax:
moveTo(start_pnt_X, start_pnt_Y);
context.quadraticCurveTo(cntrl_pnt_X, cntrl_pnt_Y, end_pnt_X, end_pnt_y);
Example: This example create a curve using quadratic bezier curve.
html
<!DOCTYPE html>
<html>
<head>
<title>
Quadratic Bezier Curve
</title>
</head>
<body>
<h1>Quadratic Bezier Curve</h1>
<canvas id="CanvasOfGeeks" width="400" height="200"
style="border:solid 4px green">
<script>
var c = document.getElementById("CanvasOfGeeks");
var context = c.getContext("2d");
var start_pnt_X = 50;
var start_pnt_Y = 150;
var cntrl_pnt_X = 200;
var cntrl_pnt_Y = 30;
var end_pnt_X = 350;
var end_pnt_Y = 150;
/* Start new path */
context.beginPath();
context.lineWidth=3;
context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y);
/* Starting point of the curve */
context.moveTo(start_pnt_X, start_pnt_Y);
context.quadraticCurveTo(cntrl_pnt_X,
cntrl_pnt_Y, end_pnt_X, end_pnt_Y);
/* drawing line on the canvas */
context.stroke();
</script>
</body>
</html>
Output: 
Explanation:
- Pre-requisite: HTML Canvas Basics
- First Line: Reference for canvas object is stored in variable 'c' using DOM concept. Second Line: Without having drawing context of canvas nothing can be drawn on it.
var c = document.getElementById("CanvasOfGeeks");
var context = c.getContext("2d");- One can change the width of line by overriding the value of "lineWidth" attribute of context object.
context.lineWidth=3;
- For putting a dot over the coordinate of control point.You can see the dot in the figure shown above.
context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y);
- This function is used to draw a curve from the start point mentioned in function.
context.quadraticCurveTo(cntrl_pnt_X, cntrl_pnt_Y, end_pnt_X, end_pnt_Y);
- This function is used to move the context.
context.moveTo(start_pnt_X, start_pnt_Y);
Note: Please keep the control point within the canvas boundary. Cubic Bezier Curve: This curve is controlled by two control points. Syntax:
moveTo(start_pnt_X, start_pnt_Y);
context.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y, cntrl_pnt_2_X,
cntrl_pnt_2_Y, end_pnt_X, end_pnt_y);
Example: This example create a curve using cubic bezier curve.
html
<!DOCTYPE html>
<html>
<head>
<title>
Cubic Bezier Curve
</title>
</head>
<body>
<h1>Cubic Bezier Curve</h1>
<canvas id="CanvasOfGeeks" width="400" height="200"
style="border:solid 4px green">
<script>
var c = document.getElementById("CanvasOfGeeks");
var context = c.getContext("2d");
var start_pnt_X = 50;
var start_pnt_Y = 100;
var cntrl_pnt_1_X = 150;
var cntrl_pnt_1_Y = 30;
var cntrl_pnt_2_X = 250;
var cntrl_pnt_2_Y = 170;
var end_pnt_X = 350;
var end_pnt_Y = 150;
/* Start a new Path */
context.beginPath();
context.lineWidth=3;
/* Representing first control point */
context.strokeText( ".", cntrl_pnt_1_X, cntrl_pnt_1_Y);
/* Representing second control point */
context.strokeText( ".", cntrl_pnt_2_X, cntrl_pnt_2_Y);
/* Starting point of the curve */
context.moveTo(start_pnt_X, start_pnt_Y);
context.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y,
cntrl_pnt_2_X, cntrl_pnt_2_Y, end_pnt_X, end_pnt_Y);
/* Drawing line on the canvas */
context.stroke();
</script>
</body>
</html>
Output: 
Example: This example draw a fish using Bezier Curve. Input:
html
<!DOCTYPE html>
<html>
<head>
<title>
Drawing a fish using Bezier Curve
</title>
</head>
<body>
<canvas id="CanvasOfGeeks" width="400" height="200"
style="border:solid 4px green">
<script>
var c = document.getElementById("CanvasOfGeeks");
var context = c.getContext("2d");
/* Start a new Path */
context.beginPath();
context.lineWidth=3;
/* Upper curve of the fish, from mouth to tail */
context.moveTo(60, 120);
context.bezierCurveTo(90, 30, 200, 130, 310, 55);
/* Lower curve of the fish, from mouth to tail */
context.moveTo(60, 120);
context.bezierCurveTo(90, 170, 200, 110, 310, 160);
/* Upper half of tail */
context.moveTo(310, 55);
context.quadraticCurveTo(320, 80, 280, 110);
/* lower half of tail */
context.moveTo(310, 160);
context.quadraticCurveTo(320, 120, 280, 110);
/* Eye of the fish */
context.moveTo(100, 100);
context.arc(100, 100, 5, 0, 2*Math.PI);
/* Mouth of the fish */
context.moveTo(60, 120);
context.lineTo(80, 120);
context.stroke();
</script>
</body>
</html>
Output: 
Similar Reads
HTML Canvas Tutorial
HTML Canvas facilitates the element <canvas> to draw graphics on Canvas with the help of JavaScript. HTML Canvas offers various methods for drawing different shapes and lines. The HTML Canvas is a rectangular area defined via height and width on an HTML page. By default, HTML Canvas has no bor
3 min read
HTML Canvas Basics
In this article, we will know HTML Canvas Basics, and their implementation through the examples. The HTML "canvas" element is used to draw graphics via JavaScript. The "canvas" element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods
5 min read
HTML Canvas Drawing
HTML Canvas Drawing facilitates the <canvas> element, along with Properties that help to draw on the HTML canvas. The various properties, attributes & events can be used with <canvas> element. Utilizing JavaScript, we can manipulate the canvas element to draw shapes, paths, and image
2 min read
HTML Canvas Coordinates
In this article, we will see the concept of coordinates in HTML Canvas Coordinates. In HTML canvas, the coordinates are very important because, with the understanding of these coordinates, we can easily draw any shapes or lines on the canvas. x-axis coordinates define the coordinates in horizontal a
2 min read
HTML Canvas Lines
In this article, we will learn how to make lines in different styles on Canvas in HTML. There are various methods used to draw a line on canvas like beginPath(), moveTo(), lineTo(), and stroke(). There are also various properties like lineWidth, strokeStyle, etc. can be used to give styles to a line
3 min read
HTML Canvas Shapes
HTML Canvas Shapes facilitate different shapes, i.e., rectangles, triangles, lines, arcs, and curves to draw on the HTML Canvas. For instance, to draw the line in the Canvas, the path will be used that implements the beginPath() method. Setting the path's starting point is achieved with moveTo(), w
3 min read
HTML Canvas Rectangles
The HTML Canvas Rectangles facilitate the rect() method to draw rectangles on canvas. There are various attributes in the rect(x, y, width, height) method such as x and y defining the coordinates of the upper-left corner of the rectangle, width defining the width of the rectangle, and height definin
4 min read
HTML Canvas Circles
HTML Canvas Circles facilitates the arc() method to make a circle where 0 is defined as the start angle and the end angle is 2*PI. The stroke() method is used to draw an outline of the circle and fill() is used to draw a filled circle we can give color with the fillStyle property. stroke() Method Cr
2 min read
HTML Canvas Curves
HTML Canvas Curves facilitate the arc() method for making a circle or a part of a circle on the canvas. There are various attributes in the arc(x, y, r, s, e) method such as x and y defining the coordinates of the center of the circle, r defining the radius, s defining the start angle, and e definin
2 min read
HTML Canvas Gradients
HTML Canvas Gradients is used to give a gradient effect on Canvas with the help of JavaScript. The different shapes, such as rectangles, circles, lines, text, etc, can be filled with Gradients. To create a gradient on Canvas, we can use two techniques, Linear Gradient and Radial Gradient. Linear Gra
3 min read