JSFiddle - React, Tailwind, and code Playground

by Smoren Freelight

HTML

<canvas id="canvas" width="1000" height="1000" style="display:block; margin:0 auto; border:1px solid black; margin-top:50px"></canvas>

JavaScript

function drawEllipse(ctx, coords, sizes, angle) {
    ctx.beginPath();
    ctx.save(); // сохраняем стейт контекста
    ctx.translate(coords[0], coords[1]); // перемещаем координаты в центр эллипса
    ctx.rotate(angle); // поворачиваем координатную сетку на нужный угол
    ctx.scale(1, sizes[1]/sizes[0]); // сжимаем по вертикали
    ctx.arc(0, 0, sizes[0], 0, Math.PI*2); // рисуем круг
    ctx.restore(); // восстанавливает стейт, иначе обводка и заливка будут сплющенными и повёрнутыми
    ctx.strokeStyle = 'green';
    ctx.stroke(); // обводим
    ctx.closePath();
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 15;
drawEllipse(ctx, [200, 200], [150, 50], Math.PI/4, 1000);