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=x;
        cache['mouseY'].value=y;        
    }
    
    function mouseMove(event){ 
        cache['curx']=event.pageX-8;
        cache['cury']=event.pageY-8;
        
        writer(cache['curx'], cache['cury']);
    }
}
createImage();