JSFiddle - React, Tailwind, and code Playground

HTML

<body>T-shirt color
    <br>
    <canvas id="toolsCanvas" width=300 height=53></canvas>
        <br>
    <p>
    <canvas id="drawingCanvas" width="520" height="429"></canvas>
</body>

CSS

canvas {
    border:1px solid #1f1f1f;
}

JavaScript

$(document).ready(function () {

    // setup color picker
    var canvas  = document.getElementById("drawingCanvas");
    var ctx     = canvas.getContext("2d");
    var tools   = document.getElementById("toolsCanvas");
    var ctx2    = tools.getContext("2d");
    var canvasOffset = $(tools).offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;
    var colors  = ['Red', 'Green', 'Blue', 'Yellow', 'Orange', 'Brown', 'Purple'];
    var lightcolors = "Yellow|White";
    var colorPickerWidth = 25;


    
    // draw the color picker
    tools.width = colors.length * colorPickerWidth;
    for (var i = 0; i < colors.length; i++) {
        ctx2.fillStyle = colors[i];
        ctx2.fillRect(i * colorPickerWidth, 0, colorPickerWidth, 25);
    }

    // called when the user clicks and picks a color
    $(tools).mousedown(function(e) {
        var x = parseInt(e.clientX - offsetX);
        var color = colors[parseInt(x / colorPickerWidth)];

        ctx2.save();
        ctx2.fillStyle = color;
        ctx2.fillRect(0, 28, tools.width, 25);
        ctx2.fillStyle = "white";
        if (lightcolors.indexOf(color) > -1) {
            ctx.fillStyle = "black";
        }
        
        ctx2.font = "16px verdana";
        ctx2.fillText("Selected: " + color, 10, 45);
        ctx2.restore();
        draw(color.toLowerCase(), color);
    });

    function draw(color, text) {
        canvas.width = canvas.width;
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = color;

        ctx.moveTo(8.2, 53.9);
        ctx.lineTo(32.4, 155.3);
        ctx.lineTo(115.9, 158.1);
        ctx.lineTo(118.5, 158.2);
        ctx.bezierCurveTo(128.1, 137.5, 133.5, 113.8, 133.5, 88.7);
        ctx.lineTo(133.5, 88.7);
        ctx.lineTo(133.5, 88.7);
        ctx.lineTo(133.5, 88.7);
        ctx.lineTo(133.5, 88.7);
        ctx.bezierCurveTo(133.5, 66.3, 129.2, 45.0, 121.5, 26.1);
        ctx.lineTo(8.2, 53.9);
        ctx.lineTo(8.2, 53.9);
       ...