JSFiddle - React, Tailwind, and code Playground

by JeffC

HTML

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

JavaScript

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

//ctx.fillStyle = "#000000";
//ctx.beginPath();
//ctx.moveTo(150, 100);
//ctx.quadraticCurveTo(200, 100, 200, 150);
//ctx.quadraticCurveTo(200, 200, 150, 200);
//ctx.quadraticCurveTo(100, 200, 100, 150);
//ctx.quadraticCurveTo(100, 100, 150, 100);
//ctx.stroke();

ctx.strokeStyle = "#FF0000";
roundedRect(ctx, 50, 50, 100, 100, 10);

ctx.strokeStyle = "#0000FF";
roundedRect(ctx, 100, 100, 100, 100, 100);

function roundedRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x, y + radius);
    ctx.lineTo(x, y + height - radius);
    ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
    ctx.lineTo(x + width - radius, y + height);
    ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
    ctx.lineTo(x + width, y + radius);
    ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
    ctx.lineTo(x + radius, y);
    ctx.quadraticCurveTo(x, y, x, y + radius);
    ctx.stroke();
}