Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

How to Draw a Circle in Javascript | How to Draw a Circle on Canvas Using Javascript

Posted on May 16, 2023

 

 

To draw a circle in JavaScript and specifically on a canvas element, you can use the getContext method to access the 2D rendering context and then utilize the arc method to create a circle shape. Follow these steps to draw a circle on a canvas using JavaScript:

Step 1: Set up the HTML structure.

In your HTML file, create a <canvas> element with an id attribute to reference it in JavaScript:

 

 

1
<canvas id="myCanvas" width="400" height="400"></canvas>

 

 

Step 2: Access the canvas element in JavaScript.

 

 

In your JavaScript file or script section, access the canvas element using the getElementById method:

 

 

JavaScript
1
2
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

 

 

Step 3: Draw the circle.

 

 

Use the arc method of the 2D rendering context (ctx) to draw a circle. The arc method takes in the X and Y coordinates of the circle’s center, the radius, and the start and end angles (in radians) to define the circle:

 

 

JavaScript
1
2
3
4
5
6
7
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
 
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.stroke();

 

 

In the code above, we define the centerX and centerY variables to determine the center point of the circle. The radius variable specifies the radius of the circle.

 

 

We then call the beginPath method to start a new path and use the arc method to draw the circle. The arc method takes in the center coordinates (centerX and centerY), the radius, and the start and end angles (0 and 2 * Math.PI respectively) to create a full circle.

Finally, the stroke method is used to outline the circle.

 

 

Step 4: Customize the circle.

 

 

To further customize the circle, you can modify properties such as the stroke color, line width, and fill color. For example:

 

 

JavaScript
1
2
3
4
5
6
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.fillStyle = 'blue';
 
ctx.stroke();
ctx.fill();

 

 

In the code above, we set the line width to 2, stroke color to 'red', and fill color to 'blue'. Then we call the stroke method to draw the outline of the circle with the updated styles, and the fill method to fill the circle with the specified fill color.

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme