JSFiddle - React, Tailwind, and code Playground

Test

by rasata

HTML

<script src="https://static.firebase.com/v0/firebase.js"></script>
<canvas id="game" width="1036px" height="600px"></canvas>

CSS

canvas, input {
    margin: 10px;
    text-align: center;
		background-color:#d23d3d;
}

JavaScript

var fb = new Firebase('https://actemium-pointer.firebaseio.com/rasatavohary');
var x = fb.child("x");
var y = fb.child("y");
function init() {
    var canvas = document.getElementById('game');
    var context  = canvas.getContext('2d');
    var width   = canvas.width;
    var height  = canvas.height;
    canvas.addEventListener("onclick", function (e){
			function getMousePos(canvas, evt) {
					var rect = canvas.getBoundingClientRect();
					return {
						x: evt.clientX - rect.left,
						y: evt.clientY - rect.top
					};
			}			
			var position = getMousePos(canvas,e);
			
			var xAdapted=(position.x - 513);
			var yAdapted=(596-position.y)-300;
			
			console.log("MouseX :" + xAdapted + "| " + "Mouse Y :" + yAdapted);
			// Corrigé 
			x.set(xAdapted);
			y.set(yAdapted);
			
			}
		, false);
}

init();