JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="hotspot" style="border: 1px solid red;" width="600" height="500"></canvas>
<br>
Click or touch to draw..

CSS

body, canvas{
    margin:0;
    padding:0;
}
html 
{ 
    /* Direct all pointer events to JavaScript code. 
    // not recommended on html, unless you are making a game!
    -ms-touch-action: none;  */
}
#hotspot {
    /* Direct all pointer events to JavaScript code. */
    -ms-touch-action: none;
}

JavaScript

var htsp=document.getElementById("hotspot");
var fingerColors=["rgb(255, 0,0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(0, 0, 255)","rgb(255, 0, 255)"];


//htsp.onmouseover=DoEvent;
htsp.onmousedown=DoEvent;
htsp.onmouseup=DoEvent;
htsp.onmousemove=DoEvent;
htsp.ontouchstart=DoEvent;
htsp.ontouchmove=DoEvent;
htsp.ontouchend=DoEvent;
htsp.ontouchcancel=DoEvent;

if (window.navigator.msPointerEnabled) {
  // Pointer events are supported.
    htsp.addEventListener("MSPointerMove", DoEvent, false);
    htsp.addEventListener("MSPointerDown", DoEvent, false);
    htsp.addEventListener("MSPointerUp", DoEvent, false);
  //  htsp.MSPointerOver
   // htsp.MSPointerOut
   // htsp.MSPointerHover
}
function startDraw(id, x,y)
{
    var ctx=htsp.getContext("2d");
    ctx.fillStyle=fingerColors[id%fingerColors.length];
    ctx.fillRect(x,y,5,5);
}
function extendDraw(id, x,y)
{
    var ctx=htsp.getContext("2d");
    ctx.fillRect(x,y,5,5);
}
function endDraw()
{
}


var lastXY = {};
function DoEvent(eventObject) {
// stop panning and zooming so we can draw
if (eventObject.preventManipulation)
eventObject.preventManipulation();
 
// we are handling this event
if (eventObject.preventDefault)
eventObject.preventDefault();
 
// if we have an array of changedTouches, use it, else create an array of one with our eventObject
var touchPoints = (typeof eventObject.changedTouches != 'undefined') ? eventObject.changedTouches : [eventObject];
for (var i = 0; i < touchPoints.length; ++i) {
var touchPoint = touchPoints[i];
// pick up the unique touchPoint id if we have one or use 1 as the default
var touchPointId = (typeof touchPoint.identifier != 'undefined') ? touchPoint.identifier : (typeof touchPoint.pointerId != 'undefined') ? touchPoint.pointerId : 1;
 
if (eventObject.type.match(/(down|start)$/i)) {
// process mousedown, MSPointerDown, and touchstart
lastXY[touchPointId] = { x: touchPoint.pageX, y: touchPoint.pageY };
startDraw(touchPointId, touchPoint.pageX,...