JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

<style type="text/css">
      canvas { border: 3px solid black; }
      
      canvas:hover {
      cursor: crosshair; }
    </style>

JavaScript

function draw() {
 var canvas = document.getElementById('Mykybo');
    if (!canvas.getContext) { 
    alert("Please use a Canvas enabled browser such as Firefox, Safari, Chrome or Opera.")
    return;
    }
    var ctx = canvas.getContext('2d');
    //compatability            
    var requestAnimationFrame = window.requestAnimationFrame || //Chromium 
    window.webkitRequestAnimationFrame || //Webkit
    window.mozRequestAnimationFrame || //Mozilla Geko
    window.oRequestAnimationFrame || //Opera Presto
    window.msRequestAnimationFrame || //IE Trident?
        function (callback) { //Fallback function
            window.setTimeout(callback, 1000 / 60);
    };
    
    var width = canvas.width;
    var height = canvas.height;
    var offTop = canvas.offsetTop;
    var offLeft = canvas.offsetLeft;    
        
    //===============================    POINTS   ===============================
    function point(id, color, size, speed, x, y, eX, eY) {
        this.id = id;
        this.color = color;
        this.size = size;
        this.x = x;
        this.y = y;
        this.eX = eX;
        this.eY = eY;
        this.velocityX = 1;
        this.velocityY = 1;
        this.speed = speed;
        this.origPosX = x;
        this.origPosY = y; 
    } 
    
    var pointList = [];
    var pointId = 0;

    function addPoint(color, psize, pspeed, x, y, eX, eY) {
        pointList[pointId] = new point(pointId, color, psize, pspeed, x, y, eX, eY);         
        pointId += 1;
    }           
    function updatePoint(point) {
    console.log(pointList[10].x)
        point.eX = pageX - offLeft;
        point.eY = pageY - offTop;         
        var dx = (point.eX - point.x);
        var dy = (point.eY - point.y);
        var mag = Math.sqrt(dx * dx + dy * dy);
        point.velocityX = (dx / mag) * point.speed;
        point.velocityY = (dy / mag) * point.speed;
        point.x += point.velocityX;
        point.y += point.velocityY;       
    }
    //ADD POINTS
   ...