JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <canvas id="myCanvas" style="border: solid;"></canvas>
        <button id="clearButton">Clear</button>
        <br />
        <div id="x">
        </div>
        <div id="y">
        </div>

JavaScript

$(document).ready(function () {
            $("#x").text("<p>hi</p>");
            $("canvas").height = 500;
            $("canvas").width = 500;
            $("canvas").mousemove(function (eventObject) {
                //alert(event);
                var ctx = this.getContext("2d");
                var clientRect = this.getBoundingClientRect();
                var x = (eventObject.pageX - clientRect.left);
                var y = (eventObject.pageY - clientRect.top);
                if (!isDrawing) {
                    return;
                }
                $("#x").text("mousemove " + x + " " + y);
                if (lastLine != null) {
                    ctx.beginPath();
                    ctx.moveTo(lastLine[0], lastLine[1]);
                    ctx.lineWidth = 5;
                    ctx.lineTo(x, y);
                    ctx.stroke();
                }

                lastLine = [x, y];
                
                //$("#x").text("mousemove");
            });

            $("canvas").on({ 'touchstart': function () { isDrawing = true; 
                $("#x").text("touchstart");
            } });
            $("canvas").on({ 'touchend': function () { 
                isDrawing = false; 
                lastLine = null;
                $("#x").text("touchend");
            } });
            $("canvas").on({
                'touchmove': function (eventObject) {
                    event.preventDefault();
                    $("#x").text("touchmove");
                    var ctx = this.getContext("2d");
                    var clientRect = this.getBoundingClientRect();
                    
                    //alert(event.touches);
                    
                    var x = (event.touches[0].pageX - clientRect.left);
                    var y = (event.touches[0].pageY - clientRect.top);
                    if (!isDrawing) {
                        return;
                    }
                    $("#x").text("touchmove " + x + " " + y);
      ...