Canvas Draw Quadratic

Beginner
⏱️ 9 min read
📚 Updated: Aug 2025
🎯 Live + 2 Examples
One Control Point
Canvas quadratic curve tutorial illustration showing a control point bending a curve

What You’ll Learn

quadraticCurveTo() draws a smooth curve using a single control point. It’s a great next step after straight lines and paths.

Once you understand the control point, you can build waves, callouts, icons, and smooth UI shapes.

⚡ Quick Reference

Syntax (quadraticCurveTo)
ctx.quadraticCurveTo(cpX, cpY, x, y);
Start point moveTo(startX, startY)

Curve draws from the current point

Control point cpX, cpY

Bends the curve

End point x, y

Where the curve finishes

👀 Live Preview — Drag the Control Point

Drag the green control point and see how the curve bends. The dashed helper lines show how the control point pulls the curve.

Drag the green point

Hint: The control point usually isn’t on the curve. It influences the curve’s tangent direction at the start and end.

1

Basic Quadratic Curve

This mirrors the legacy example: a curve from left to right pulled upward by a control point.

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

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 20, 200, 100);

ctx.strokeStyle = '#0f172a';
ctx.lineWidth = 3;
ctx.stroke();
2

Wave (Two Quadratic Segments)

Longer curves are usually built from multiple quadratic segments. Keep control points aligned for smooth tangents.

script.js
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.moveTo(40, 120);

// up
ctx.quadraticCurveTo(120, 40, 200, 120);
// down
ctx.quadraticCurveTo(280, 200, 360, 120);

ctx.strokeStyle = '#2563eb';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.stroke();

💡 Best Practices

Do

  • Call moveTo() first to set the curve start
  • Use helper lines while designing curves (like this page’s preview)
  • Use multiple segments for long curves and keep tangents smooth
  • Use lineCap = 'round' for nicer endpoints
  • Use beginPath() to prevent accidental connections

Don’t

  • Assume the control point lies on the curve
  • Forget stroke()/fill() (paths don’t render by default)
  • Accidentally continue old shapes without beginPath()
  • Use quadratic curves for complex shapes where cubic is easier
  • Hardcode many magic numbers without extracting constants for readability

❓ Frequently Asked Questions

It’s a curve defined by start + end points and one control point, drawn with quadraticCurveTo().
Yes. The curve draws from the current point, so set it with moveTo().
Usually no. It pulls the curve and controls the tangent direction near endpoints.
Check beginPath(), your coordinates, and that you called stroke() or fill() with visible styles.

Next: Draw Rectangles

Learn the fastest way to draw rectangles and how fill/stroke styles apply.

Canvas Draw Rectangles →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

Canvas Draw Paths Canvas Draw Rectangles