Draw circles and ellipses in canvas

by Egor Mokeev

HTML

<canvas width="300" height="300" id="elem"></canvas>

JavaScript

const canvas = document.getElementById("elem");
const ctx = canvas.getContext("2d");
const step = 2 * Math.PI / 20;
const h = 150; 
const k = 150;
const r = 50;

ctx.beginPath();

for(let theta = 0; theta < 2 * Math.PI; theta += step) {
    const x = h + r * Math.cos(theta);
    const y = k - r * Math.sin(theta);
    ctx.lineTo(x, y);
}

ctx.closePath();
ctx.stroke();