JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=a></canvas>

JavaScript

var c = a.getContext('2d');
// сохраняем стейт контекста
c.save();
// смещаем начало координат (центр вращения)
c.translate(100, 100);
// вращаем координатную сетку
c.rotate(Math.PI/4);
// сжимаем по вертикали
c.scale(1, .5);

// рисуем (вернее, определяем) круг
c.arc(0, 0, 50, 0, Math.PI*2);

// восстанавливает стейт, иначе обводка и заливка
// будут сплющенными и повёрнутыми.
// фигура уже определена, с ней ничего не будет
c.restore();

c.stroke();
// Voila!