JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="red" value="Make Red" />
<input type="button" id="back" value="Go Back" />

<canvas id="myCanvas" width="500" height="350">
        
</canvas>

JavaScript

var context;
$(function () {

    context = document.getElementById("myCanvas").getContext("2d");

    drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");

    $("#red").click(function () {
        drawWedge(250, 250, 200, 0, 18, "rgb(255, 0, 0)");
    });

    $("#back").click(function () {
        drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");
    });

});

function d2r(degrees) {
    return degrees * (Math.PI / 180.0);
}

function drawWedge(centerX, centerY, r, start, end, color) {
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.arc(centerX, centerY, r, d2r(start), d2r(end), false);
    context.closePath();
    context.fillStyle = color;
    context.fill();
}