JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
<div id="canvas"></div>

CSS

#canvas {
  margin: 50px auto;
  display: block;
  width: 300px; height: 300px;
}

JavaScript

const ctx = document.getElementById('canvas');
const two = new Two({ height: 300, width: 300 }).appendTo(ctx);

// set bg
const bg = two.makeRectangle(150, 150, 300, 300);
bg.fill = '#252525';

const [x, y, ir, or] = [150, 150, 40, 50];
const arc = two.makeArcSegment(x, y, ir, or, Math.PI, 2 * Math.PI);
arc.fill = 'green';
two.update();


// draw an arc
/* ctx.lineWidth = 10;
ctx.lineCap = 'round';
for(let i = 0; i < 5; ++i) {
  const [x, y] = [150, 150 - i * 5];
  let r = 2 + i * (i === 0 ? 10 : 20);
  ctx.beginPath();
  
  if (i === 0) {
    ctx.arc(x, y, r, 0, 2 * Math.PI);
  }
  else {
    const z = i * 0.05;
    ctx.arc(x, y, r, -0.5 - z, 1 * Math.PI + 0.5 + z, true);
  }
  ctx.strokeStyle = '#05fffe';
  ctx.stroke();
} */