Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw a quadratic curve on HTML5 Canvas?
The HTML5 <canvas> element provides a powerful way to draw graphics, animations, and complex shapes using JavaScript. To draw smooth curved lines, HTML5 Canvas offers the quadraticCurveTo() method, which creates quadratic Bézier curves between points.
A quadratic Bézier curve is defined by three points: a starting point, an ending point, and a control point that determines the curve's direction and curvature. The curve starts from the current path position, bends toward the control point, and ends at the specified endpoint.
Syntax
Following is the syntax for the quadraticCurveTo() method −
context.quadraticCurveTo(cpx, cpy, x, y);
Parameters
The quadraticCurveTo() method accepts the following parameters −
cpx − The x-coordinate of the control point that determines the curve's direction.
cpy − The y-coordinate of the control point that determines the curve's direction.
x − The x-coordinate of the curve's endpoint.
y − The y-coordinate of the curve's endpoint.
How It Works
The quadratic curve connects the current path position to the endpoint (x, y) using the control point (cpx, cpy) to determine the curve's shape. Before calling quadraticCurveTo(), you must establish a starting point using moveTo() or another path method.
Basic Quadratic Curve
Example
Following example demonstrates how to draw a simple quadratic curve −
<!DOCTYPE html>
<html>
<head>
<title>Simple Quadratic Curve</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<canvas id="simpleCanvas" width="400" height="200" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('simpleCanvas');
var ctx = canvas.getContext('2d');
// Draw a simple quadratic curve
ctx.beginPath();
ctx.moveTo(50, 150); // Starting point
ctx.quadraticCurveTo(200, 50, 350, 150); // Control point and end point
ctx.strokeStyle = '#3498db';
ctx.lineWidth = 3;
ctx.stroke();
// Mark the points
ctx.fillStyle = '#e74c3c';
ctx.fillRect(47, 147, 6, 6); // Start point
ctx.fillStyle = '#f39c12';
ctx.fillRect(197, 47, 6, 6); // Control point
ctx.fillStyle = '#27ae60';
ctx.fillRect(347, 147, 6, 6); // End point
</script>
</body>
</html>
The output displays a smooth blue curve connecting the start and end points −
A curved line bending upward from left to right, with colored markers at start, control, and end points.
Complex Shape Using Multiple Curves
Example
Following example shows how to combine multiple quadratic curves to create a complex shape −
<!DOCTYPE html>
<html>
<head>
<title>Complex Quadratic Shape</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<canvas id="complexCanvas" width="500" height="300" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('complexCanvas');
var ctx = canvas.getContext('2d');
// Draw a heart shape using quadratic curves
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.strokeStyle = '#e74c3c';
ctx.fillStyle = '#ffebee';
ctx.lineWidth = 2;
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
The output shows a heart-shaped figure created by connecting multiple quadratic curves −
A heart shape filled with light pink color and outlined in red.
Interactive Curve Drawing
Example
Following example demonstrates drawing curves with different control point positions −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Quadratic Curves</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<canvas id="interactiveCanvas" width="600" height="300" style="border: 1px solid #000;"></canvas>
<p>Three curves with different control point positions</p>
<script>
var canvas = document.getElementById('interactiveCanvas');
var ctx = canvas.getContext('2d');
// Curve 1: Control point above
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.quadraticCurveTo(150, 50, 250, 200);
ctx.strokeStyle = '#3498db';
ctx.lineWidth = 3;
ctx.stroke();
// Curve 2: Control point below
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.quadraticCurveTo(400, 250, 500, 100);
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 3;
ctx.stroke();
// Curve 3: Control point to the side
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(300, 150, 550, 50);
ctx.strokeStyle = '#27ae60';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
The output displays three different curves showing how control point position affects the curve shape −
Three colored curves: blue curve bending upward, red curve bending downward, green curve with side control.
Key Points
Always call
beginPath()before starting a new path andmoveTo()to set the starting point.The control point determines the curve direction but the curve doesn't pass through it.
Use
stroke()to draw the outline orfill()to fill closed shapes.Multiple
quadraticCurveTo()calls can be chained to create complex shapes.The curve always starts from the current path position and ends at the specified
(x, y)coordinates.
Conclusion
The quadraticCurveTo() method is essential for creating smooth, curved paths in HTML5 Canvas. By understanding how the control point influences the curve's shape, you can create everything from simple arcs to complex artistic shapes. Practice with different control point positions to master the technique of drawing beautiful quadratic curves.
1K+ Views
