JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='Canvas' style='border:1px black solid;'></canvas>

<input id='mouseX'>
<input id='mouseY'>

JavaScript

function createImage() {
    var cache = {
        'canvas': document.getElementById("Canvas"),
        'curx':0,
        'cury':0,
        'mouseX':document.getElementById('mouseX'),
        'mouseY':document.getElementById('mouseY')
    }
    cache['ctx'] = cache['canvas'].getContext("2d"),
    
    cache['canvas'].onmousemove = mouseMove;
    
    var writer = function(x,y) {
        cache['mouseX'].value=curx;
        cache['mouseY'].value=cury;        
    }
    
    function mouseMove(event){ 
        curx=event.pageX-8;
        cury=event.pageY-8;
        
        cache['curx'] = curx;
        cache['cury'] = cury;
        
        writer(curx, cury);
    }
}

    createImage();