how to draw a circular ring in a square in javascript

index.tsx
// Create a canvas element
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
document.body.appendChild(canvas);

// Get the canvas context
const ctx = canvas.getContext('2d');

// Draw the square
ctx.fillStyle = 'lightgray';
ctx.fillRect(50, 50, 100, 100);

// Draw the circular ring
ctx.beginPath();
ctx.arc(100, 100, 40, 0, 2 * Math.PI, false);
ctx.strokeStyle = 'black';
ctx.lineWidth = 10;
ctx.stroke();
448 chars
20 lines