Article Categories

Selected Reading

How to draw a circle in JavaScript?

Javascript Web Development Object Oriented Programming

Drawing circles in JavaScript is accomplished using the HTML5 Canvas API and the arc() method. This method allows you to create perfect circles and arcs with precise control over position, size, and styling.

Basic Circle Drawing Syntax

context.arc(x, y, radius, startAngle, endAngle, counterclockwise);

Parameters

Parameter	Description
`x, y`	Center coordinates of the circle
`radius`	Circle radius in pixels
`startAngle`	Starting angle (0 for full circle)
`endAngle`	Ending angle (2 * Math.PI for full circle)

Interactive Circle Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Draw Circle in JavaScript</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .circleCanvas {
      border: 3px solid #110101;
      display: block;
      margin: 20px 0;
   }
   .Btn {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
   }
</style>
</head>
<body>
<h1>Draw a Circle in JavaScript</h1>
<canvas class="circleCanvas" width="400" height="200"></canvas>
<button class="Btn">DRAW CIRCLE</button>
<h3>Click the button to create a circle on the canvas</h3>

<script>
   let canvasEle = document.querySelector(".circleCanvas");
   let BtnEle = document.querySelector(".Btn");
   
   BtnEle.addEventListener("click", () => {
      var context = canvasEle.getContext("2d");
      
      // Clear canvas first
      context.clearRect(0, 0, canvasEle.width, canvasEle.height);
      
      // Draw circle
      context.beginPath();
      context.arc(200, 100, 80, 0, 2 * Math.PI);
      context.strokeStyle = "#FF5722";
      context.lineWidth = 3;
      context.stroke();
   });
</script>
</body>
</html>

Multiple Circles with Different Styles

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Circles</title>
<style>
   canvas { border: 2px solid #333; margin: 10px; }
</style>
</head>
<body>
<canvas id="multiCanvas" width="500" height="300"></canvas>

<script>
   const canvas = document.getElementById('multiCanvas');
   const ctx = canvas.getContext('2d');

   // Filled circle
   ctx.beginPath();
   ctx.arc(125, 100, 50, 0, 2 * Math.PI);
   ctx.fillStyle = '#FF6B6B';
   ctx.fill();

   // Outlined circle
   ctx.beginPath();
   ctx.arc(250, 100, 50, 0, 2 * Math.PI);
   ctx.strokeStyle = '#4ECDC4';
   ctx.lineWidth = 4;
   ctx.stroke();

   // Combined fill and stroke
   ctx.beginPath();
   ctx.arc(375, 100, 50, 0, 2 * Math.PI);
   ctx.fillStyle = '#45B7D1';
   ctx.strokeStyle = '#2C3E50';
   ctx.lineWidth = 3;
   ctx.fill();
   ctx.stroke();
</script>
</body>
</html>

Key Methods for Circle Drawing

Method	Purpose
`beginPath()`	Starts a new drawing path
`arc()`	Creates the circular path
`stroke()`	Draws the circle outline
`fill()`	Fills the circle with color

Conclusion

The Canvas arc() method is the standard way to draw circles in JavaScript. Use stroke() for outlines, fill() for solid circles, or combine both for enhanced visual effects.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next