Canvas Draw Arc

Beginner
⏱️ 9 min read
📚 Updated: Aug 2025
🎯 Live + 2 Examples
Radians
Canvas arc tutorial illustration showing a semicircle and circle segments

What You’ll Learn

The canvas arc() method lets you draw circular arcs (including full circles). You control center, radius, start & end angles, and whether it draws anticlockwise.

Angles are measured in radians, where \(2\pi\) is a full circle.

⚡ Quick Reference

Syntax (ctx.arc)
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
Center x, y

Arc center point in canvas pixels

Size radius

Distance from center to arc

Angles radians

Use degrees × (Math.PI / 180)

Direction anticlockwise

true draws counterclockwise

👀 Live Preview — Arc Controls

Adjust the angles and radius to see how ctx.arc() behaves. This preview also shows the center point and start/end markers.

start: 0° (0.00 rad) · end: 180° (3.14 rad)

Remember: canvas 0 radians points to the right (3 o’clock). Positive angles move clockwise unless you set anticlockwise to true.

1

Draw a Semicircle (Stroke)

This matches the classic beginner example: a half-circle from 0 to \(\pi\) radians.

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

  // Draw a red arc (semicircle)
  ctx.beginPath();
  ctx.arc(120, 90, 60, 0, Math.PI, false);
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

🧠 How it works

The arc is centered at (120, 90) with radius 60. It starts at 0 radians (right side) and ends at \(\pi\) radians (left side), producing a semicircle outline.

2

Draw a Filled Pie Slice

To create a sector (pie slice), connect the arc back to the center and fill the path.

script.js
const cx = 150, cy = 110, r = 80;
const start = 20 * (Math.PI / 180);
const end = 120 * (Math.PI / 180);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(cx, cy, r, start, end, false);
ctx.closePath();

ctx.fillStyle = '#2563eb';
ctx.fill();
ctx.strokeStyle = '#0f172a';
ctx.lineWidth = 2;
ctx.stroke();

💡 Best Practices

Do

  • Call beginPath() before each separate arc/path
  • Convert degrees to radians with deg * (Math.PI / 180)
  • Use stroke() for outlines and fill() for solid shapes
  • For pie slices, moveTo() the center then closePath()
  • Use lineCap = 'round' for smoother arc endpoints

Don’t

  • Pass degrees directly (your arc will be tiny or wrong)
  • Forget stroke()/fill() after defining the arc
  • Expect an arc to show if radius is 0 or angles are identical
  • Assume direction is always counterclockwise (default is clockwise)
  • Overdraw huge canvases every frame without throttling/profiling

❓ Frequently Asked Questions

It adds an arc (or full circle) to the current path. Draw it with stroke() or fill it with fill().
They are radians. Convert degrees with deg * (Math.PI / 180).
Double-check: beginPath(), a non-zero radius, different start/end angles, and that you called stroke() or fill().
If true, the arc is drawn counterclockwise from start to end. If false (default), it’s drawn clockwise.

Learn Bezier Curves Next

After arcs, Beziers are the next step for drawing smooth curves and paths.

Canvas Draw Bezier →

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 Composition Canvas Draw Bezier