JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<canvas id="myCanvas" width="300" height="300">Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

//Define Variables
var radius = 80;
var point_size = 4;
var center_x = 150;
var center_y = 150;
var font_size = "20px";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawCircle(){
    ctx.beginPath();
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI);
    ctx.stroke();
}

function drawPoint(angle,distance,label){
    var x = center_x + radius * Math.cos(-angle*Math.PI/180) * distance;
	var y = center_y + radius * Math.sin(-angle*Math.PI/180) * distance;
    
	ctx.beginPath();
    ctx.arc(x, y, point_size, 0, 2 * Math.PI);
    ctx.fill();
    
    ctx.font = font_size;
	ctx.fillText(label,x + 10,y);
}

//Execution
drawCircle();
drawPoint(0,1,"A");
drawPoint(90,1.5,"B");
drawPoint(180,1,"C");
drawPoint(45,0.5,"D");