JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="500" height="500" class="canvas" id="canvs"></canvas>
<table id="numbers"></table>

CSS

.canvas{
    background-color:white;
    border:1px solid black;
}

JavaScript

var canvas = document.getElementById('canvs'),
    ctx = canvas.getContext("2d");	
    
ctx.beginPath();
var x = (canvas.width/2) - 5;
var y = (canvas.height/2) - 5;
ctx.rect(x, y, 11, 11);
ctx.fillStyle="blue"
ctx.fill();

ctx.beginPath();
ctx.rect(canvas.width/2,canvas.height/2,1,1);
ctx.fillStyle="red"
ctx.fill();

function bigCircle(angle, color) {
    var radius = 5000; //the bigger, the worse
    var x = canvas.width/2 + radius*Math.cos(angle);
    var y = canvas.height/2 + radius*Math.sin(angle);

    var numbers = document.getElementById('numbers');
    var row = document.createElement('tr');
    row.innerHTML = '<tr><td>' + x + '</td><td>' + y + '</td></tr>';
    numbers.appendChild(row);
    
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.lineWidth = 2;
	ctx.strokeStyle = color;
	ctx.stroke();
}

bigCircle(0, '#00c0ff');
bigCircle(Math.PI / 4, '#00c0ff');
bigCircle(Math.PI / 2, '#00c0ff');

bigCircle(Math.PI / 8, '#ff0000');