JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"> </canvas>

CSS

#canvas {
  height: 500px;
  width: 1300px;
  background-color: black;
  position: absolute;
  left: 25px;
  top: 50px;
}

body {
  background-color: white;
}

JavaScript

//variables
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var player = new Image();
player.src = "http://i.stack.imgur.com/P9vJm.png";

c.addEventListener('mousemove', update, false);

//functions
function start() {
  setInterval(update, 10);
}

function update(e) {
  //clearRender();
  render(e);
}

function clearRender() {
  ctx.clearRect(0, 0, 1300, 500);
}

function render(e) {
  var pos = getMousePos(c, e);
  posx = pos.x;
  posy = pos.y;
  ctx.drawImage(player, posx, posy);
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}