Quadratic Graph with JavaScript
Learn how to draw quadratic curves using HTML5 Canvas and JavaScript
Introduction to Quadratic Curves
To draw a quadratic curve, we use the quadraticCurveTo() method. This method requires combining with the beginPath() and moveTo() methods to define the starting point of the curve.
The syntax of the quadraticCurveTo() method is:
quadraticCurveTo(controlX, controlY, endX, endY)
Parameters:
controlX, controlY: Coordinates of the control point (defines the curve)endX, endY: Coordinates of the end point
moveTo()
Before drawing, we need to create a canvas by defining its width and height using the <canvas> tag. Note that this is an HTML5 feature that may not be supported in older browsers.
Example 1: Fixed Quadratic Curve
This example demonstrates how to draw a quadratic curve with predefined starting, control, and end points.
function drawFixedCurve() {
const canvas = document.getElementById('fixedCurveCanvas');
const ctx = canvas.getContext('2d');
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw axes
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width, canvas.height/2);
ctx.moveTo(canvas.width/2, 0);
ctx.lineTo(canvas.width/2, canvas.height);
ctx.strokeStyle = '#ddd';
ctx.stroke();
// Draw curve
ctx.beginPath();
ctx.moveTo(50, 250); // Start point
ctx.quadraticCurveTo(175, 50, 300, 250); // Control point and end point
ctx.strokeStyle = '#e91e63';
ctx.lineWidth = 3;
ctx.stroke();
// Draw points
drawPoint(ctx, 50, 250, 'Start');
drawPoint(ctx, 175, 50, 'Control');
drawPoint(ctx, 300, 250, 'End');
}
function drawPoint(ctx, x, y, label) {
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.fillStyle = '#673ab7';
ctx.fill();
ctx.font = '14px Arial';
ctx.fillStyle = '#333';
ctx.fillText(label, x + 10, y - 10);
}
Fixed Quadratic Curve
Example 2: Interactive Quadratic Curve
Create a quadratic curve by entering coordinates for the start, control, and end points.
function drawInteractiveCurve() {
const canvas = document.getElementById('interactiveCurveCanvas');
const ctx = canvas.getContext('2d');
// Get input values
const startX = parseInt(document.getElementById('startX').value) || 50;
const startY = parseInt(document.getElementById('startY').value) || 250;
const controlX = parseInt(document.getElementById('controlX').value) || 175;
const controlY = parseInt(document.getElementById('controlY').value) || 50;
const endX = parseInt(document.getElementById('endX').value) || 300;
const endY = parseInt(document.getElementById('endY').value) || 250;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw axes
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width, canvas.height/2);
ctx.moveTo(canvas.width/2, 0);
ctx.lineTo(canvas.width/2, canvas.height);
ctx.strokeStyle = '#ddd';
ctx.stroke();
// Draw curve
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(controlX, controlY, endX, endY);
ctx.strokeStyle = '#2196f3';
ctx.lineWidth = 3;
ctx.stroke();
// Draw points
drawPoint(ctx, startX, startY, 'Start');
drawPoint(ctx, controlX, controlY, 'Control');
drawPoint(ctx, endX, endY, 'End');
}
Interactive Quadratic Curve
Example 3: Multiple Quadratic Curves
This example shows how to draw multiple quadratic curves with different colors and styles.
function drawMultipleCurves() {
const canvas = document.getElementById('multipleCurvesCanvas');
const ctx = canvas.getContext('2d');
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw axes
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width, canvas.height/2);
ctx.moveTo(canvas.width/2, 0);
ctx.lineTo(canvas.width/2, canvas.height);
ctx.strokeStyle = '#ddd';
ctx.stroke();
// Curve 1
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.quadraticCurveTo(125, 50, 200, 250);
ctx.strokeStyle = '#e91e63';
ctx.lineWidth = 3;
ctx.stroke();
// Curve 2
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.quadraticCurveTo(275, 450, 350, 250);
ctx.strokeStyle = '#2196f3';
ctx.lineWidth = 3;
ctx.stroke();
// Curve 3 (dashed)
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.quadraticCurveTo(175, 300, 300, 150);
ctx.strokeStyle = '#4caf50';
ctx.lineWidth = 2;
ctx.setLineDash([5, 5]);
ctx.stroke();
ctx.setLineDash([]);
}
Multiple Quadratic Curves
Example 4: Animated Quadratic Curve
This example animates the quadratic curve by moving the control point over time.
let animationId;
let angle = 0;
function animateCurve() {
const canvas = document.getElementById('animatedCurveCanvas');
const ctx = canvas.getContext('2d');
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw axes
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width, canvas.height/2);
ctx.moveTo(canvas.width/2, 0);
ctx.lineTo(canvas.width/2, canvas.height);
ctx.strokeStyle = '#ddd';
ctx.stroke();
// Calculate moving control point
const controlX = 175 + Math.sin(angle) * 100;
const controlY = 150 + Math.cos(angle) * 100;
// Draw curve
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.quadraticCurveTo(controlX, controlY, 300, 250);
ctx.strokeStyle = '#ff9800';
ctx.lineWidth = 3;
ctx.stroke();
// Draw control point
ctx.beginPath();
ctx.arc(controlX, controlY, 6, 0, Math.PI * 2);
ctx.fillStyle = '#ff5722';
ctx.fill();
// Update angle for next frame
angle += 0.05;
// Continue animation
animationId = requestAnimationFrame(animateCurve);
}
Animated Quadratic Curve
More Canvas Examples
Explore more JavaScript canvas examples to enhance your skills: