JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<canvas id="c"></canvas>

JavaScript

var SIZE = 500
var MID = SIZE / 2
var R = MID - 10
var PI = Math.PI
var TAU = PI * 2

var c = document.getElementById('c')
var ctx = c.getContext('2d')

c.width = c.height = SIZE

ctx.translate(MID, MID)

ctx.beginPath()
ctx.arc(0, 0, R, 0, TAU, false)
ctx.stroke()

ctx.save()
ctx.rotate(-PI / 4)
ctx.scale(1, 1 / 1.618)
ctx.beginPath()
ctx.arc(0, 0, R, 0, PI, false)
ctx.stroke()
ctx.restore()