JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"> 
      <canvas id="sketchpad" width="1000" height="500"> 
        Sorry, your browser is not supported.
       </canvas>	
       	
      <div id = "Summary" width = "1000" height = "300"></div>
      
	</div>

CSS

body{margin:0;padding:0; font-family:Arial;}
		#container{position:relative;}
		#sketchpad{ border: 1px solid #000;}	
		#Summary{ border: 1px dot #000;}

JavaScript

var actions = 'tap drag dragend hold transform transformstart transformend swipe';
var element, touchevent, originalevent, targetId;
var _touch_length;

function start() {
    canvas = document.getElementById('sketchpad')
    context=canvas.getContext('2d')
}

function getpos(e) {
    var offset=$(canvas).offset()
    return {
    	x:e.pageX-offset.left,
    	y:e.pageY-offset.top,
    }
}

TAN_HALF_PI = Math.tan(Math.PI / 2)

function direction(d) {
    var horiz = (Math.abs(d.x) > Math.abs(d.y))
    if (horiz) {
        if (d.x < 0) return 0;
        return 1;
    } else {
        if (d.y < 0) return 2;
        return 3;
    }
}

function vector(x, y) {
    return {
        x: x,
        y: y
    }
}

function delta(a, b) {
    return vector(a.x - b.x, a.y - b.y)
}

function angle(d) {
    return Math.atan((1.0 * d.y) / d.x)
}

function angle_between(a, b) {
    return Math.acos((a.x * b.x + a.y * b.y) / (len(a) * len(b)))

}

function len(v) {
    return Math.sqrt(v.x * v.x + v.y * v.y)
}

function lineInterection(p1,p2,p3,p4) {
var x1 = p1.x;
var x2 = p2.x;
var x3 = p3.x;
var x4 = p4.x;
var y1 = p1.y;
var y2 = p2.y;
var y3 = p3.y;
var y4 = p4.y;

    var x=((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
    var y=((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));

    if (isNaN(x)||isNaN(y)) {
        return false;
    } else {
        if (x1>=x2) {
            if (!(x2<=x&&x<=x1)) {return false;}
        } else {
            if (!(x1<=x&&x<=x2)) {return false;}
        }
        if (y1>=y2) {
            if (!(y2<=y&&y<=y1)) {return false;}
        } else {
            if (!(y1<=y&&y<=y2)) {return false;}
        }
        if (x3>=x4) {
            if (!(x4<=x&&x<=x3)) {return false;}
        } else {
            if (!(x3<=x&&x<=x4)) {return false;}
        }
        if (y3>=y4) {
            if (!(y4<=y&&y<=y3)) {return false;}
        } else {
            if (!(y3<=y&&y<=y4)) {return false;}
   ...