Canvas Draw Bezier

Beginner
⏱️ 10 min read
📚 Updated: Aug 2025
🎯 Live + 2 Examples
Control Points
Canvas Bezier tutorial illustration showing control points and a smooth curve

What You’ll Learn

Bezier curves are how you draw smooth curves on canvas. The curve is defined by a start point, an end point, and one or two control points that bend the curve.

Canvas supports both quadraticCurveTo() (1 control point) and bezierCurveTo() (2 control points).

⚡ Quick Reference

Quadratic quadraticCurveTo(cp1x, cp1y, x, y)

One control point, smoother than lines

Cubic bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Two control points, more flexibility

Start point moveTo(startX, startY)

Curves draw from the current point

👀 Live Preview — Move Control Points

Drag the green/orange control points to see how they bend the curve. Toggle between quadratic and cubic curves.

Drag points

Hint: control points are usually not on the curve. They act like magnets that pull the curve and control its tangent direction near the endpoints.

1

Quadratic Bezier Curve

Quadratic curves use one control point. The curve starts at the last moveTo() position.

index.html
<canvas id="myCanvas" width="420" height="220"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(50, 160);                 // start
  ctx.quadraticCurveTo(160, 20, 320, 140); // control, end
  ctx.strokeStyle = '#2563eb';
  ctx.lineWidth = 4;
  ctx.stroke();
</script>

🧠 How it works

The control point (160, 20) pulls the curve upward. Moving it changes the curve’s bend and the tangent direction near the start/end.

2

Cubic Bezier Curve

Cubic curves use two control points, giving you more control over the shape.

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

ctx.beginPath();
ctx.moveTo(60, 170); // start
ctx.bezierCurveTo(
  140, 10,  // cp1
  300, 220, // cp2
  360, 70   // end
);

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

💡 Best Practices

Do

  • Always set a start point with moveTo() before the curve
  • Use helper lines/points while designing a curve (like the live preview)
  • Use cubic curves for complex shapes; quadratic is great for simple bends
  • Use lineJoin / lineCap for smooth path rendering
  • Use multiple Bezier segments for longer paths (and keep tangents smooth)

Don’t

  • Forget beginPath() if you want a separate curve
  • Assume control points lie on the curve
  • Use too many segments without simplifying (performance + maintainability)
  • Ignore the current point; curves draw from wherever the pen is
  • Mix up cp/end ordering (it changes the curve dramatically)

❓ Frequently Asked Questions

A Bezier curve is a smooth curve defined by endpoints and control point(s). In canvas you draw them using quadraticCurveTo() and bezierCurveTo().
Quadratic uses 1 control point; cubic uses 2 and can form more complex shapes and inflections.
Bezier methods draw from the current point. Call moveTo() before the curve.
Usually no. They pull the curve and define tangent direction near endpoints.

Continue with Lines & Paths

Learn how to draw clean paths using lines, joins, and strokes.

Canvas Draw Lines →

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 Arc Canvas Draw Lines