JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="500" height="500"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

var canvas = document.getElementsByTagName('canvas')[0];
var canvasDim = {
    width: canvas.width,
    height: canvas.height
};
var canvasOffset = canvas.getBoundingClientRect();

var context = canvas.getContext('2d');
context.stroke = "#000000";
context.fill = "#000000";

var currentPosition = {x:0, y:0};
var previousPosition = currentPosition;
var onlyClearPreviousPositon = true;

canvas.onmousemove = function(e){
    currentPosition = {
        x: e.clientX - canvasOffset.left,
        y: e.clientY - canvasOffset.top
    };
};
function drawAtCursor(){
    if (onlyClearPreviousPositon){
        // experiment - try not clearing the whole canvas 
        context.clearRect(previousPosition.x - 4, previousPosition.y - 4, 8, 8);
        previousPosition = currentPosition;
    } else {
        context.clearRect(0, 0, canvasDim.width, canvasDim.height);
    }
    context.fillRect(currentPosition.x - 4, currentPosition.y - 4, 8, 8);
    window.requestAnimationFrame(drawAtCursor);   
}

drawAtCursor();