JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas4" width="1000" height="1000">
  
</canvas>

JavaScript

var canvas = document.getElementById("canvas4"); 
  var context = canvas.getContext("2d");
  context.save();
  context.scale(0.5, 1);
  context.beginPath();
  var startAngle = 0 * Math.PI; // rad
  var endAngle = 1.2 * Math.PI; // rad
  var counterClockwise = false;

  //context.beginPath();
  context.arc(200, 200, 100, startAngle, endAngle, false);

  context.restore();
  context.lineWidth=2;
  context.strokeStyle="orange";
  context.stroke();  

   context.beginPath();
   context.arc( 100 + (Math.cos(1.2 * Math.PI)*50)  , 200 + (Math.sin(1.2 * Math.PI)*100)  , 5, 0, 2 * Math.PI, false);
   context.fillStyle = 'green';
   context.fill();
   context.lineWidth = 1;
   context.strokeStyle = '#003300';
   context.stroke();