JSFiddle - React, Tailwind, and code Playground

by Brandon

HTML

<div class="LineWidthSliderContainer">
  <div class="LineWidthSlider inline">Line Size:
    <input id="pencilSlider" type="range" min="1" max="50" value="12" />
  </div>
  <div class="pencilSize inline" id="pencilSliderResult"></div>
</div>

<div class="ToolsContainer">
  <div class="Tools relative">
    <a href="#" class="changeDrawColor" data-options='{"color":"black"}'>
      <div class="Paint Swatch inline" id="drawBlack"></div>
    </a>
    <a href="#" class="changeDrawColor" data-options='{"color":"white"}'>
      <div class="Paint Swatch inline" id="drawWhite"></div>
    </a>
    <a href="#" class="changeDrawColor" data-options='{"color":"red"}'>
      <div class="Paint Swatch inline" id="drawRed"></div>
    </a>
    <a href="#" class="changeDrawColor" data-options='{"color":"orange"}'>
      <div class="Paint Swatch inline" id="drawOrange"></div>
    </a>
    <a href="#" class="changeDrawColor" data-options='{"color":"yellow"}'>
      <div class="Paint Swatch inline" id="drawYellow"></div>
    </a>
    <a href="#" class="changeDrawColor" data-options='{"color":"green"}'>
      <div class="Paint Swatch inline" id="drawGreen"></div>
    </a>
    <a href="#" class="changeDrawColor" data-options='{"color":"blue"}'>
      <div class="Paint Swatch inline" id="drawBlue"></div>
    </a>
    <a href="#" class="changeDrawColor" data-options='{"color":"purple"}'>
      <div class="Paint Swatch inline" id="drawPurple"></div>
    </a>
  </div>
  <a href="#">
    <input type="button" class="btn error" value="clear" onclick="sketcher.clear();" />
  </a>
</div>

<div class="SketchPad customCursor">
  <canvas id="sketch" width="800" height="400" />
</div>

CSS

body {
  padding: 0px;
  margin: 0px;
  text-align: center;
}

.inline {
  display: inline-block;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

#sketch {
  border: 1px solid #888888;
  background-color: white;
  border-radius: 0px;
}

.Paint.Swatch {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 3px;
}

#drawBlack {background: black}
#drawWhite {background: white}
#drawRed {background: red}
#drawOrange {background: orange}
#drawYellow {background: yellow}
#drawGreen {background: green}
#drawBlue {background: blue}
#drawPurple {background: purple}

.changeDrawWidth {
  min-height: 30px;
  min-width: 30px;
  background: white;
  display: inline-block;
}

.Size.Swatch {
  border-radius: 100px;
  background: black;
  margin: 0 2px;
  vertical-align: middle;
}

#pencilSlider {
  width: 200px;
  height: 50px;
  line-height: 54px;
  vertical-align: middle;
}

.pencilSize {
  width: 40px;
  border-radius: 50px;
  background: black;
  text-align: center;
  height: 12px;
  width: 12px;
  vertical-align: middle;
}

.LineWidthSlider {
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.LineWidthSliderContainer {
  position: relative;
}

.SketchPad.cursor1 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor2 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor3 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor4 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor5 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor6 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor06.png') 2 2, auto}
.SketchPad.cursor7 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor06.png') 2 2, auto}
.SketchPad.cursor8...

JavaScript

//-------------------------------------------------- Change Color
$(function() { 
    $(".changeDrawColor").click(function(event) { 
        var options = $(this).data("options");
      sketcher.context.strokeStyle = options.color
    	  $('#pencilSliderResult').css({
  		 	 background: options.color,
    	});
    });
});
//-------------------------------------------------- Change Line Width with slider 
$(document).ready ( function(){
   var pencilTipSize = document.getElementById("pencilSlider");
var pencilTipSizeResult = document.getElementById("pencilSliderResult");

pencilTipSize.addEventListener("input", function() {
    $('#pencilSliderResult').css({
    width: pencilTipSize.value,
    height: pencilTipSize.value,
    });
    
    sketcher.context.lineWidth = pencilTipSize.value;
    
    $( ".SketchPad" ).attr('class', 'SketchPad customCursor cursor'+pencilTipSize.value);
	}, false); 
	
});

//----------------------------------------------------------------------------------------

var sketcher = null;
$(document).ready(function(e) {
	sketcher = new Sketcher( "sketch" );
});

//----------------------------------------------------------------------------------------

function Sketcher( canvasID, brushImage ) {
	this.renderFunction = (brushImage == null || brushImage == undefined) ? this.updateCanvasByLine : this.updateCanvasByBrush;
	this.brush = brushImage;
	this.touchSupported = Modernizr.touch;
	this.canvasID = canvasID;
	this.canvas = $("#"+canvasID);
	this.context = this.canvas.get(0).getContext("2d");	
	this.context.strokeStyle = "black";
	this.context.lineWidth = 12;
  this.context.lineJoin = "round";                              //----NEW
  this.context.lineCap = "round";                               //----NEW
	this.lastMousePoint = {x:0, y:0};
    
	if (this.touchSupported) {
		this.mouseDownEvent = "touchstart";
		this.mouseMoveEvent = "touchmove";
		this.mouseUpEvent = "touchend";
	}
	else {
		this.mouseDownEvent =...