JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<canvas id="myCanvas" width="123" height="123"></canvas>

CSS

#myCanvas {
    background-color: lightgray;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var diameter = 144;
var radius = diameter / 2;
var centerX = radius - 21;
var centerY = radius;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#006C93';
context.fill();