JSFiddle - React, Tailwind, and code Playground

by mathspountz

HTML

<canvas id="canvas" width="400" height="400"></canvas>
<p id="log"></p>
<p id="logx"></p>
<p id="logy"></p>
<script src="http://code.jquery.com/jquery.min.js"></script>

CSS

canvas {
  border: 1px solid black;
}
canvas:hover{
  cursor: none;
}

JavaScript

$(function() {

  function gestionSouris() {
    this.canvas = document.getElementById('canvas');
    this.ctx = this.canvas.getContext('2d');
  }
  gestionSouris.prototype = {
    oX: 0,
    oY: 0,
    cursorSize: 5,
    cursorX: 0,
    cursorY: 0,

    setCursorX: function(x) {
      this.cursorX = x - this.oX;
      $("#logx").html(this.cursorX + ' - ' + this.cursorY);
    },
    setCursorY: function(y) {
      this.cursorY = y - this.oY;
      $("#logy").html(this.cursorX + ' - ' + this.cursorY);
    },

    refresh: function() {
      $("#log").html(this.cursorX + ' - ' + this.cursorY);
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      if (cursorX > 0) {
        this.ctx.beginPath();
        this.ctx.moveTo(this.cursorX + this.cursorSize, this.cursorY);
        this.ctx.arc(this.cursorX, this.cursorY, this.cursorSize, 0, Math.PI * 2, true);
        this.ctx.stroke();
      }
    }
  }

  o = new gestionSouris();

  $('canvas').mousemove(function(event) {
    o.setCursorX(event.pageX);
    o.setCursorY(event.pageY);
  });
  $('canvas').mouseleave(function(event) {
    o.setCursorX(0);
    o.setCursorY(0);
  });
  
  var boucle = setInterval(o.refresh(), 50);

});