<center>
  <canvas id="myCanvas" width="500" height="500"></canvas></center>


// Get the canvas element from the HTML file
const canvas = document.getElementById("myCanvas");

// Create a 2D drawing context
const ctx = canvas.getContext("2d");

// Set the center coordinates and the radius of the circle
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 200;

// Set the color and other properties of the circle
ctx.strokeStyle = "'dotted' black"; // Color of the circle's border (black in this case)
ctx.lineWidth = 5; // Width of the circle's border

// Draw the circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.stroke(); // Draws the border of the circle
ctx.closePath();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.