Для того чтобы нарисовать круг мы должны использовать команду:
сtx.arc(x,y,radius,0,2*Math.PI);x — координата по оси Х
y — координата по оси Y
radius — длина радиуса
остальные параметры не меняем
Но следует учесть, что начало рисования круга находится справа в конечно точке радиуса. А сам круг рисуется в координатах x,y.
Можно посмотреть на ролик. Первые 5 мин.
<html>
<head>
<title>JavaScript</title>
</head>
<body bgcolor="LightCyan">
<h1>Это canvas</h1>
<canvas id="canvas" width="1500" height="800" style="background: LightYellow"></canvas>
<script>
// неизменяется ------------------------------------
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
//------------------------------------------
ctx.beginPath(); //начало рисунка
ctx.arc(500,400,100,0,2*Math.PI);
ctx.moveTo(1100,400);
ctx.arc(1000,400,100,0,2*Math.PI);
ctx.moveTo(900,400);
ctx.lineTo(600,400);
ctx.stroke(); // конец рисунка
</script>
</body>
</html>