JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="main" width="100" height="100" ></canvas>

JavaScript

/* Main Canvas */
var main = document.getElementById('main');
main.width = window.innerWidth;
main.height = window.innerHeight;
var mainCtx = main.getContext('2d');
var mainFill = '#000';
mainCtx.fillStyle = mainFill;
mainCtx.rect(0,0,main.width,main.height);
mainCtx.fill();

/* secondary canvas */
var cv = document.createElement('canvas');
cv.style.position = 'absolute';
cv.width = '200';
cv.height = '100';
cv.style.left = '0px';
cv.style.top = '0px';
var ctx = cv.getContext('2d');
var fillRect = '#ccc';
var fillText = '#000';
ctx.fillStyle = fillRect;
ctx.rect(0,0,cv.width,cv.height);
ctx.fill();

//draw this canvas to main canvas
mainCtx.drawImage(cv,parseInt(cv.style.left),parseInt(cv.style.top));

var isHolding = false;
var mDown = function(e)
{
    isHolding = true;
    draw(e);
    main.addEventListener('mousemove',mMove);
}

var mMove = function(e)
{
    console.log('moving');
    if(isHolding)
    {
         draw(e);
    }
}

var mUp = function(e)
{
    isHolding = false;
    xDown = cv.offsetLeft;
    yDown = cv.offsetTop;
    main.removeEventListener('mousemove',mMove);
}

function draw(e)
{
     var xPos = e.pageX;
     var yPos = e.pageY;
     cv.style.left = (xPos-(cv.width/2))+'px';
     cv.style.top = (yPos-(cv.height/2))+'px';
     cv.width = cv.width; //clears canvas
     ctx.fillStyle = fillRect;
     ctx.rect(0,0,cv.width,cv.height);
     ctx.fill();
     ctx.fillStyle = fillText;
     ctx.fillText('x: '+(e.pageX-(cv.width/2)),10,10);
     ctx.fillText('y: '+(e.pageY-(cv.height/2)),50,10);
        
     //draw temp canvas to main canvas
     this.width = this.width;
     mainCtx.fillStyle = mainFill;
     mainCtx.rect(0,0,main.width,main.height);
     mainCtx.fill();
    
    mainCtx.drawImage(cv,parseInt(cv.style.left),parseInt(cv.style.top));
}

main.addEventListener('mousedown',mDown);
main.addEventListener('mouseup',mUp);