JSFiddle - React, Tailwind, and code Playground

by Jsbbvk

HTML

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

JavaScript

var theCanvas = document.getElementById('canvasBg');
var context = theCanvas.getContext('2d');


var circleImg = new Image();
circleImg.src = "https://cdn3.iconfinder.com/data/icons/arrows/16/arrow__squared-big-circle-2-01-512.png";
circleImg.id = "circleImg";
var mouse = {
  x: 0,
  y: 0
}

theCanvas.addEventListener("mousemove", mouseMove);

function mouseMove(e) {
  mouse.x = e.x;
  mouse.y = e.y;
}


function drawScreen() {
  context.fillStyle = "#ffffff";
  context.fillRect(0, 0, theCanvas.width, theCanvas.height);
  context.strokeStyle = "#000000";
  context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);

	var angle = Math.atan2(mouse.x - circleImg.x, mouse.y - circleImg.y) * 180 / Math.PI;
  //document.getElementById("circleImg").css('transform', 'rotate('+angle+'deg)');
  //console.log(angle);
 	
  
  context.drawImage(circleImg, theCanvas.width / 2 - 25, theCanvas.height / 2 - 25, 50, 50);
}

function onTick() {
  window.setTimeout(onTick, 20);
  drawScreen();
}
onTick();