JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

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

JavaScript

var canvas = document.querySelector('canvas');
var canvasWidth = canvas.clientWidth;
var canvasHeight = canvas.clientHeight;
var maxLineLength = canvasWidth / 3;

var context = canvas.getContext('2d');
context.translate(canvasWidth / 2, canvasHeight / 2);

for(var i = 0; i < Math.PI * 2; i += .001) {
    var distance = getUnitLength(i) * maxLineLength;
    var x = distance * Math.cos(i);
    var y = distance * Math.sin(i);
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
}

function getUnitLength(theta) {
    var dx = (1 - Math.cos(theta));
    var dy = Math.sin(theta);
    return Math.sqrt(dx * dx + dy * dy) / 2;
}