JSFiddle - React, Tailwind, and code Playground

by jksolock

HTML

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

CSS

canvas {
    display: block;
}

JavaScript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grad= ctx.createLinearGradient(50, 50, 175, 175);
grad.addColorStop(0, "red");
grad.addColorStop(1, "black");

ctx.beginPath();
ctx.arc(100,100,50,0,1*Math.PI);
ctx.stroke();
ctx.strokeStyle = grad ;
ctx.lineCap = 'round';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 20.0;