JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

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

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

width = 500;
height = 500;

canvas.width = width;
canvas.height = height;

centerX = 250;
centerY = 250;
radius = 220;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.stroke();

// Change y from -radius to radius
var y = -150;

ctx.fillStyle = "#f00";
// center
ctx.beginPath();
ctx.arc(centerX, centerY, 5, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
// top
ctx.beginPath();
ctx.arc(centerX, centerY + y, 5, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();

// calculated
ctx.fillStyle = "#00f";
var x = Math.sqrt(radius * radius - y * y);
ctx.beginPath();
ctx.arc(x + centerX, centerY + y, 5, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();