JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var c=document.getElementById("myc");
var ctx = c.getContext("2d");
ctx.scale(4, 4)

var theta = 1.5;  // angle that will be increased each loop
var outertheta = 1.4;
var step = 2*Math.PI/20;  // amount to add to theta each time (degrees)
 var r = 10;
  var outerR = r+6;
 
 var points = [];

for (i = theta; i <= 2*Math.PI; i += step) {
    x = 30 + r * Math.cos(i);
    y = 30+ r * Math.sin(i);

		ctx.fillRect(x,y,1,1);
    points.push([x,y]);
    debugger;
 }
 
 for (i = 2*Math.PI; i >= outertheta; i -= step) {
    x = 30 + (outerR) * Math.cos(i);
    y = 30+ (outerR) * Math.sin(i);

		ctx.fillRect(x,y,1,1);
    points.push([x,y]);
    debugger;
 }
 


console.log(points);