JSFiddle - React, Tailwind, and code Playground

by WolfeSVK

HTML

<body bgcolor="#616161">
   <center>
   <table cellspacing="0" cellpadding="0">
      <tr>
         <td colspan="5">
            <div id="canvasContainer" align="center">
               <canvas id="canvas" width="400" height="400" style="background-color: #ffffff">
               Your browser doesn't support canvas object!
               </canvas>
            </div>
         </td>
      </tr>
      <tr>
         <td align="right">
            <button class ="button" id="LeftButton" onclick="addLine();">
            Add Line
            </button>
         </td>
         <td align="left">
            <button class ="button" id="RightButton"  onclick="removeLine();">
            Remove Line
            </button>
         </td>
         <td align="center">
            <div id="toggleButton">
               <label>
                  <input type="checkbox" name="toggleCheckbox">
                  <span>
                  Snap to the grid
                  </span>
               </label>
            </div>
         </td>
         <td align="right">
            <button class ="button" id="LeftButton" onclick="enlargeGrid();">
            Enlarge Grid
            </button>
         </td>
         <td align="left">
            <button class ="button" id="RightButton"  onclick="reduceGrid();">
            Reduce Grid
            </button>
         </td>
      </tr>
   </table>
   </center>
</body>

CSS

#toggleButton label span {
    text-align: center;
    vertical-align: text-bottom;
    padding: 3px 10px;
    display: block;
    font-family: Tahoma, Arial, Verdana;
    font-size: 10px;
}

#toggleButton label input {
    position: absolute;
    visibility: hidden;
}

    
#toggleButton {
    background-position: right;
    
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;    

  
    overflow: hidden;
    width: 100px;
    border: 0px solid #000000;
    color: #000000;
    
    background: #ffffff;
 /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
 /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
 /* IE6-8 */
    
}

#toggleButton:hover {
    border: 0px solid #ffffff;
    color: #ffffff;
    
    background: rgb(165,165,165);
 /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(165,165,165,1) 0%, rgba(49,49,49,1) 46%, rgba(39,39,39,1) 50%, rgba(47,47,47,1) 53%, rgba(105,105,105,1) 76%, rgba(86,86,86,1) 87%, rgba(61,61,61,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(165,165,165,1)), color-stop(46%,rgba(49,49,49,1)), color-stop(50%,rgba(39,39,39,1)), color-stop(53%,rgba(47,47,47,1)),...

JavaScript

var canvas;
var ctx;
var mouse = [];
var keyboard = [];

var needsToRedraw = true;

var gridSize = 10;
var GRID_MIN_SIZE = 10;
var GRID_MAX_SIZE = 70;
var snapToGrid = false;

var lines = new Array();
var numOfLines = 5;

var SPACING = 20; // how far from border to create random lines

var MIN_DRAG_DIST = 5;
var MIN_DRAG_DIST_SQ = Math.pow(MIN_DRAG_DIST, 2);

var mouseSelect = null;
var eraseHighlight = false;


//// styles declarations

var gridLineStyle = "rgba(0,0,0,0.2)";
var gridLineWidth = 1;

var dragStateStyle = "rgba(0,0,0,0.1)";

var linesColors = new Array();


////////////////////////////

//////////////////////////////
////

var Point = function(posX, posY) {
    var x, y;
    this.x = posX;
    this.y = posY;
};

var PointInfo = function( /* x, y, lineOrder, pointOrder */ ) {
    var x, y, lineOrder, pointOrder;
    /*
    this.x = x;
    this.y = y;
    this.lineOrder = lineOrder;
    this.pointOrder = pointOrder;
    */
};

var Line = function(p1, p2) {
    this.p1 = p1; // p1, p2 = class Point
    this.p2 = p2;
};

function addLine() {
    numOfLines++;
    lines.push(new Line(
        new Point(Math.floor(Math.random() * (canvas.width - SPACING * 2) + SPACING),
            Math.floor(Math.random() * (canvas.height - SPACING * 2) + SPACING)),
        new Point(Math.floor(Math.random() * (canvas.width - SPACING * 2) + SPACING),
            Math.floor(Math.random() * (canvas.height - SPACING * 2) + SPACING))
    ));

    linesColors.push(Math.floor(Math.random() * 360));
    needsToRedraw = true;
    update();
}

function removeLine() {
    if (numOfLines > 2) {
        numOfLines--;
        lines.pop();
        linesColors.pop();
        needsToRedraw = true;
        update();
    }
}

function toggleSnap() {
    snapToGrid = !snapToGrid;
}

function enlargeGrid() {
    if (gridSize < GRID_MAX_SIZE) {
        gridSize += 5;
        needsToRedraw = true;
        update();
    }
}

function reduceGrid() {
    if (gridSize > GRID_MIN_SIZE) {
       ...