JSFiddle - React, Tailwind, and code Playground

by Julien Roche

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var centerX = 50, centerY = 50;

// Draw the radial circle
ctx.save();
ctx.beginPath();

var gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 20);
gradient.addColorStop(0, 'rgb(66, 180, 230)');
gradient.addColorStop(1, 'rgb(255, 255, 255)');

ctx.arc(centerX, centerY, 20, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.restore();

// Draw the white circle with border
ctx.save();
ctx.beginPath();
ctx.arc(centerX, centerY, 10, 0, 2 * Math.PI);
ctx.strokeStyle = 'rgb(159, 160, 164)';
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();

// Draw the blue circle
ctx.save();
ctx.beginPath();
ctx.arc(centerX, centerY, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'rgb(66, 180, 230)';
ctx.fill();
ctx.closePath();
ctx.restore();