JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.eyecon.ro/colorpicker/js/colorpicker.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/colorpicker/css/colorpicker.css">
<canvas id="preview" height="40" width="40" style="border: 1px solid #000;"></canvas>
<br>
    Color: <p id="colorSelector" ></p>
<br>
Pen Size: <input type="text" id="pen_size" value="1"> <input type="button" value="Clear" id="clear_button">
<br>
<canvas id="canvas" height="400" width="400" style="border: 1px solid #000;"></canvas>

JavaScript

(function( $ ){
    var methods = {
        init : function( options ) {
            var canvas = this;
            var context = canvas.get(0).getContext("2d");
            var settings = $.extend(true, {
                'pen': {
                    'size': 1,
                    'color': '#000000'
                },
                'preview': false,
                'background': '#ffffff',
                'zoom': 10
            }, options, {
                'canvas': canvas,
                'context': context
            });
            
            canvas.data('iconEditor', settings);
            
            //Background
            context.fillStyle = settings.background;
            context.fillRect(0, 0, canvas.height(), canvas.width());
            
            if (settings.preview)
            {
                var preview = $(settings.preview);
                settings.preview_ctx = preview.get(0).getContext("2d");
                settings.preview_ctx.fillStyle = settings.background;
                settings.preview_ctx.fillRect(0, 0, preview.height(), preview.width());
            }
            // set painting color
            canvas.iconEditor('setColor', settings.pen.color);
            
            var mouse_down = false;
            $(document).mouseup(function() {
                mouse_down = false;
            });
            canvas.mousedown(function(e){
                //  click
                if (e.which == 1 || e.which == 3)
                {
                    mouse_down = true;
                    if (e.which == 1)
                    {
                        // left click
                        canvas.iconEditor('setColor', settings.pen.color);
                    }
                    else
                    {
                        // right click
                        canvas.iconEditor('setColor', settings.background);
                    }
                    
                    var x = (e.pageX - this.offsetLeft);
           ...