JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<canvas id="canvas" width="300" height="300" style="border: solid 1px;-ms-touch-action: none;ms-touch-action: none;" aria-haspopup="false"></canvas>
<br>	<span id="v1"></span>

JavaScript

var inn = 0;
var lastCommnad = "";
var x = 0;
var y = 0;
$(document).ready(function () {
    document.getElementById("canvas").addEventListener('mouseout', mouseout, false);
    document.getElementById("canvas").addEventListener('mousedown', mousedown, false);
    document.getElementById("canvas").addEventListener('mousemove', mousemove, false);
    document.getElementById("canvas").addEventListener('mouseup', mouseup, false);
});

function mouseout() {
    write("Mouse out ");
}

function mousedown() {
    write("Mouse Down");
}

function mousemove(event) {
    write("Mouse moved");
    x = event.pageX;
    y = event.pageY;
}

function mouseup() {
    write("Mouse Up");
}

function write(text) {
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.clearRect(0, 0, 300, 300);
    ctx.fillRect(x - 15, y - 15, 30, 30);

    if (lastCommnad == text) return;
    inn++;
    if (inn > 10) {
        inn = 0;
        $("#v1").empty();
    }
    lastCommnad = text;
    $("#v1").append("  " + text + "  <br>");
}