JSFiddle - React, Tailwind, and code Playground

by JeffC

HTML

<canvas id="canvas"></canvas>

JavaScript

function Main()
{
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    canvas.width = canvas.height = 500;
    var tCtx = roundRect(1, 1, 9, 9, 2, false, true);
    for (var iCol = 0; iCol < 10; iCol++)
    {
        for (var iRow = 0; iRow < 10; iRow++)
        {
            ctx.drawImage(tCtx.canvas, iRow * 10, iCol * 10);
        }
    }
    
    var cCtx = drawCircle("#FFA812", 25, 25, 25, 0, Math.PI * 2, true);
    ctx.drawImage(cCtx.canvas, 26, 26);
}

Main();

function drawCircle(fillStyle, x, y, radius, startAngle, endAngle, antiClockwise)
{
    var ctx = document.createElement("canvas").getContext("2d");
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle, antiClockwise);
    ctx.fill();
    ctx.closePath();
    
    return ctx;
}
/**
 * Draws a rounded rectangle using the current state of the canvas.
 * If you omit the last three params, it will draw a rectangle
 * outline with a 5 pixel border radius
 * @param {Number} x The top left x coordinate
 * @param {Number} y The top left y coordinate
 * @param {Number} width The width of the rectangle
 * @param {Number} height The height of the rectangle
 * @param {Number} radius The corner radius. Defaults to 5;
 * @param {Boolean} fill Whether to fill the rectangle. Defaults to false.
 * @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true.
 */
function roundRect(x, y, width, height, radius, fill, stroke)
{
    var ctx = document.createElement("canvas").getContext("2d");

    if (typeof stroke === "undefined")
    {
        stroke = true;
    }
    if (typeof radius === "undefined")
    {
        radius = 5;
    }
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
   ...