JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200" height="400"></canvas>

JavaScript

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

		var circle = function (x, y, radius, color) {
			ctx.strokeStyle = color;
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2, false);
			
		};

		ctx.lineWidth = 2;

		circle(100, 100, 50, 'black');
		ctx.stroke();

		circle(80, 90, 10, 'black');
		ctx.fill();
		circle(120, 90, 10, 'black');
		ctx.fill();
		circle(100, 110, 10, 'orange');
		ctx.fill();

		circle(100, 220, 70, 'black');
		ctx.stroke();

		circle(100, 195, 10, 'black');
		ctx.fill();
		circle(100, 220, 10, 'black');
		ctx.fill();
		circle(100, 245, 10, 'black');
		ctx.fill();