JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<canvas id='cvs'></canvas>

JavaScript

var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var h, w, speed = 10;
this.onresize = function() {
  h = window.innerHeight, w = window.innerWidth;
  cvs.setAttribute("height", h);
  cvs.setAttribute("width", w);
};
this.onresize.call();
var cx = w / 2,
  cy = h / 2;
var nx = cx,
  ny = cy;
this.onmouseup = function(event) {
  nx = event.clientX, ny = event.clientY;
};
var draw = function() {
  ctx.save();
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, w, h);

  cx += (nx - cx) / speed;
  cy += (ny - cy) / speed;

  ctx.beginPath();
  ctx.fillStyle = "#fff";
  ctx.arc(cx, cy, 10, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();

  ctx.restore();
  setTimeout(draw, 1000 / 32);
};
draw();