JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

context = document.getElementsByTagName('canvas')[0].getContext('2d');
//rectangle
context.beginPath();
context.moveTo(0, 0);
context.lineTo(context.canvas.width, 0);
context.lineTo(context.canvas.width, context.canvas.height);
context.lineTo(0, context.canvas.height);
//first circle
context.moveTo(context.canvas.width / 2 + 20, context.canvas.height / 2);
context.arc(context.canvas.width / 2 + 20, context.canvas.height / 2, 50, 0, Math.PI*2, true);
context.arc(context.canvas.width / 2 + 20, context.canvas.height / 2, 80, 0, Math.PI*2, true);
context.closePath();
context.fill();