<canvas id="myCanvas" width="500" height="300"></canvas>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Начинаем новый путь
ctx.beginPath();

// Рисуем дугу (круг) с центром в точке (100, 100) и радиусом 50
ctx.arc(100, 100, 50, 0, Math.PI * 2);

// Закрываем путь (для круга это не обязательно)
// ctx.closePath();

// Рисуем контур пути
ctx.strokeStyle = 'blue'; // Цвет контура
ctx.lineWidth = 2; // Толщина линии
ctx.stroke();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.