JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var ctx = document.getElementById("canvas").getContext("2d");
      var x = 150 ; 
      var y = 150 ;
      var r = 100 ;
      var scaleX = 1 ;
      var scaleY = 1 ;
      
        ctx.save() ;
        ctx.translate(x,y) ;

        ctx.beginPath() ;
        ctx.arc(0,0,r,0,2*Math.PI);
        ctx.closePath() ;
        ctx.fillStyle = "cyan" ;
        ctx.fill() ;
        ctx.lineWidth = 10;
        ctx.stroke();
        ctx.restore() ;

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

        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();