JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div id="gamepanel">
  <canvas width="100%" height="100%"></canvas>
</div>

CSS

* { 
  margin:0; 
  padding:0; 
} 

html, body { 
  width:100%; 
  height:100%; 
} 

canvas {
  display: block;
}

#gamepanel {
  width: 100%;
  height: 100%;
}

JavaScript

var mouseX, mouseY;
var canvasOffset = $("canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

(function($) {
	draw();
  
  $('#gamepanel').on('mousemove', function(e) {
  
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);  
    //e.pageX, e.pageY
  	draw();
  });
  
})(jQuery);

function draw(newArcWidth, newArcHeight) {
	var c = $("canvas")[0];
  var cc = c.getContext("2d");

	c.width = window.innerWidth;
	c.height = window.innerHeight;

  cc.clearRect(0, 0, c.width, c.height);

  arcWidth = newArcWidth ? newArcWidth : c.width/2;
  arcHeight = newArcHeight ? newArcHeight : c.height/2;

  cc.beginPath();
  cc.arc(arcWidth, arcHeight, 50, 0, 2 * Math.PI, false);
  
  cc.fillStyle = "rgba(122,122,122,1)";
  cc.fill();
  
cc.beginPath();
cc.arc(100, 100, 50, 0, 2 * Math.PI, false);
  cc.fillStyle = "rgba(50,50,50,1)";
  cc.fill();
  
  
  console.log(cc.isPointInStroke(mouseX, mouseY));
}