JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id = "canvas" width = 500 height = 500>

JavaScript

var ctx = document.getElementById("canvas").getContext("2d");
var r = 50    
x = ctx.canvas.width/2;
y = ctx.canvas.height/2;
var offset = 60;

ctx.save();
ctx.setTransform(1,0,0,1.5,x+100,y);
ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI);
ctx.stroke();
ctx.clip();


ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI,false);
ctx.fillStyle = "cyan";
ctx.fill();

ctx.setTransform(1, 0, 0, 1, x+100, y);
ctx.beginPath();
ctx.arc(0,-offset,r,0,2*Math.PI,false);
ctx.fillStyle = "#f2f2f2";
ctx.fill();
ctx.lineWidth = 1 ;
ctx.stroke();

ctx.setTransform(1,0,0,1.5,x+100,y);
ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI,false);
ctx.lineWidth = 5 ;
ctx.stroke();

ctx.restore();




// this one was before i figured out which haves pixel visible


var scaleX = 1 ;
var scaleY = 1 ;

ctx.save() ;
ctx.translate(x-50,y) ;
ctx.scale(scaleX , scaleY+0.5);
ctx.beginPath() ;
ctx.arc(0,0,r,0,2*Math.PI);
ctx.closePath() ;
ctx.fillStyle = "cyan" ;
ctx.fill() ;
ctx.lineWidth = 4;
ctx.stroke();
ctx.restore() ;

ctx.save() ;
ctx.clip() ;
ctx.translate(x-50,y);

ctx.scale(scaleX , scaleY);
ctx.beginPath();
ctx.moveTo(r,-r-10);
ctx.arc(0,-r-10,r,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle = "#f2f2f2";
ctx.fill();
ctx.lineWidth = 1;
ctx.stroke();
ctx.restore();