JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tools">
    <p><button id="reset">RESET</button></p>
    <p id="color">
        <button>BLACK</button>
        <button><img class="btn-img" src ="https://s3.namuwikiusercontent.com/s/a4c238926aee04051a5876e1987326a45e47db1d095cf1744e62e92834312da3916b75693620b8645d7a21fd52d7c9b86bd68e14901d3b898cc1fc8e446a2e99cf0e0a5c24e99c59929b1a2e22ce6bf970b9d4e492273056205bd4cc516793b8">RED</img></button>
        <button>BLUE</button>
        <button>YELLOW</button>
        <button>PURPLE</button>
        <button>BROWN</button>
    </p>
</div>
<canvas id="canvas" width="500" height="500"></canvas>

CSS

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

JavaScript

var DrawingTool = {
    canvas   : null,
    context  : null,
    drawX    : [],
    drawY    : [],
    drawDrag : [],
    drawColor: [],
    isDraw   : false,
    colorTable : [
        "#000000",
        "#ff0000",
        "#0000ff",
        "#ffff00",
        "#cb3594",
        "#986828"
    ]
};
    
    DrawingTool.init = function() {
        var self = this;
        var offset = $("#canvas").offset();
        this.canvas = document.getElementById("canvas");
        this.context = this.canvas.getContext("2d");
        
        $("#canvas").mousedown(function(event) {
            self.isDraw = true;
            self.addDraw(event.pageX - offset.left, event.pageY - offset.top);
            self.reDraw();
        });
        
        $("#canvas").mousemove(function(event) {
            if(self.isDraw) {
                self.addDraw(event.pageX - offset.left, event.pageY - offset.top, true);
                self.reDraw();
            }
        });
        
        $("#canvas").bind("mouseup mouseleave", function(event) {
            self.isDraw = false;
        });
        
        this.setColorButton();
        this.setResetButton();
    };

    DrawingTool.addDraw = function(x, y, drawing) {
        this.drawX.push(x);
        this.drawY.push(y);
        this.drawDrag.push(drawing);
        this.drawColor.push(this.selectedColor || this.colorTable[0]);
    };

    DrawingTool.reDraw = function() {
        this.context.lineJoin = "round";
        this.context.lineWidth = 5;
        
        for(var i = 0; i < this.drawX.length; i ++) {
            this.context.beginPath();
            if(this.drawDrag[i] && i) {
                this.context.moveTo(this.drawX[i - 1], this.drawY[i - 1]);
            } else {
                this.context.moveTo(this.drawX[i] - 1, this.drawY[i]);
            }
            
            this.context.lineTo(this.drawX[i], this.drawY[i]);
            this.context.closePath();
            this.context.strokeStyle = this.drawColor[i];
  ...