JSFiddle - React, Tailwind, and code Playground

by mnk

HTML

<canvas id="stage"></canvas>

CSS

body {
  background-color: #eee;
}

canvas {
  background-color: white;
}

JavaScript

const fill = "#FF0000";
const stroke = "#000000"

const size = 68;
const halfSize = size / 2;
const canvas = document.getElementById('stage');
const ctx = canvas.getContext('2d');
canvas.width = size;
canvas.height = size

ctx.beginPath();
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;

ctx.arc(halfSize , halfSize , halfSize - 2, 0, 2 * Math.PI);

ctx.save();
ctx.clip();
ctx.lineWidth = 12;
ctx.fill();
ctx.stroke();
ctx.restore();


/* ctx.fill();
ctx.stroke(); */