JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas_element" width="1000" height="1000" />

JavaScript

var cloudSize = 10;

var canvas = document.getElementById('canvas_element');
var c = canvas.getContext('2d');
var prevX = -1;
var prevY = -1;
var curX = -1;
var curY = -1;
var distance = 0;
var direction = 0;

function drawMouse(x, y, angle, gray){
    var grayVal = Math.round(gray*255);
    var grayString = "rgb(" + grayVal + "," + grayVal +"," + grayVal + ")";
    c.fillStyle = grayString;
    c.strokeStyle = grayString;
    c.lineWidth = 1;
    c.beginPath();
    c.moveTo(x, y);
    c.lineTo(x + 16*Math.cos(angle + Math.PI/2.0 + Math.PI/8.0), y + 16*Math.sin(angle + Math.PI/2.0 + Math.PI/8.0));
    c.moveTo(x, y);
    c.lineTo(x + 16*Math.cos(angle + Math.PI/2.0 - Math.PI/8.0), y + 16*Math.sin(angle + Math.PI/2.0 - Math.PI/8.0));
    c.lineTo(x + 16*Math.cos(angle + Math.PI/2.0 + Math.PI/8.0), y + 16*Math.sin(angle + Math.PI/2.0 + Math.PI/8.0));
    c.stroke();
    c.fill();
    c.beginPath();
    c.moveTo(x, y);
    c.lineTo(x + 24*Math.cos(angle + Math.PI/2), y + 24*Math.sin(angle + Math.PI/2));
    c.stroke();
}

function sum(array){
    var s = 0.0;
    for(var i=0; i<array.length; i++){
        s += array[i];
    }
    return s;
}

var sins = [];
var coss = [];
var lengths = [];
var times = [];
var index = 0;
var limit = 20;
var variance = 0;
var prevTime = new Date().getTime();
function updateDistanceAndDirection(x, y){
    var angle = Math.atan2(prevY - curY, prevX - curX);
    sins[index] = Math.sin(angle);
    coss[index] = Math.cos(angle);
    lengths[index] = Math.sqrt((curX-prevX)*(curX-prevX) + (curY-prevY)*(curY-prevY));
    var time = new Date().getTime();
    times[index] = time - prevTime;
    
    variance = 1.0 - Math.sqrt(sum(coss)*sum(coss)+sum(sins)*sum(sins))/sins.length;
    
    direction = Math.atan2(1/sins.length*sum(sins),1/coss.length*sum(coss));
    var speed = sum(lengths)/(sum(times)/200);
    distance = Math.min(Math.max(40, speed), 100);
    prevTime = time;
    index = (index+1)%limit;
}

function drawMice(count){
   ...