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" class="unselectable"></p>
<br>
Pen Size: <input type="text" id="pen_size" value="2">
<br>
<canvas id="canvas" height="400" width="400" style="border: 1px solid #000;"></canvas>

CSS

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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());
            }
            
            canvas.click(function(e){
                var x = (e.pageX - this.offsetLeft);
                var y = (e.pageY - this.offsetTop);
                x = 10 * Math.floor( x / 10 );
                y = 10 * Math.floor( y / 10 );
                canvas.iconEditor('setPixel', x, y);
            });
            canvas.mousemove(function(e){
                // Left mouse click
                if(e.which == 1)
                {
                    var x = (e.pageX - this.offsetLeft);
                    var y = (e.pageY - this.offsetTop);
                    x = settings.zoom * Math.floor( x / settings.zoom );
                    y = settings.zoom * Math.floor( y / settings.zoom );
                    canvas.iconEditor('setPixel', x, y);
                }
            });
        },
        option: function(new_settings)
        {
            var settings =...