JSFiddle - React, Tailwind, and code Playground

canvas - animation

HTML

<canvas id="canvas" width="400" height="300"></canvas>

CSS

#canvas {
  border: 1px dashed black;
}

JavaScript

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

var step = 50;
var angle = 0.01;
var w = c.canvas.width;
var h = c.canvas.height;
var cmTID;
var size = 50;
var mouse = {x: 0, y: 0};
var isMouseOn = false;

  c.canvas.onmousemove = function(evt){
	mouse.x = evt.clientX;
  mouse.y = evt.clientY;
}
	c.canvas.onmousedown = function(){ isMouseOn = true; }
  c.canvas.onmouseup = function(){ isMouseOn = false; }

function drawStep() {
  c.clearRect(0, 0, w, h);
	c.save();
  c.translate(w / 2, h / 2);
  c.rotate(angle);
	c.strokeRect(-size / 2, -size / 2, size, size);
  c.restore();
  
  if(isMouseOn){
  c.beginPath();
  c.moveTo(w / 2, h / 2);
  c.lineTo(mouse.x, mouse.y);
  c.stroke();
  }
  
  angle += 0.1;
  
  clearTimeout(cmTID);
  cmTID = setTimeout(drawStep, step);
}

drawStep();