JSFiddle - React, Tailwind, and code Playground

MyFiddle

by rasata

HTML

<script src="https://static.firebase.com/v0/firebase.js"></script>
<input id="info" type="text" readonly>
<canvas id="game" width="1280px" height="720px"></canvas>

<!-- <video width="1280px" height="680px" id=v controls loop>
    <source src="http://localhost:1337" type=video/mp4 >
</video>
-->

CSS

canvas, input {
    margin: 10px;
    text-align: center;
		background-color : #ffffff;
}
#game {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   // width: 100%;
   // height: 100%;
}
#v {
    position: absolute;
    top: 0;
    left: 0;
}

img{
	top:0;
	left:0;
}

JavaScript

var fb = new Firebase('https://actemium-pointer.firebaseio.com/rasatavohary');
var fbx = fb.child("x");
var fby = fb.child("y");

var canvas;
var x, y;
var dx=4;
var dy=4;
var d = 20;
var width, height;

function init() {
    canvasE = document.getElementById('game');
    canvas= canvasE.getContext('2d');
    width = canvasE.width;
    height = canvasE.height;
    x = d+dx+1;
    y = d+dy+1;
    canvasE.addEventListener("click", onClick, false);
    clear();
}

function drawCircle() {
 clear();
 canvas.arc(x-1,y-1,d,0,Math.PI*2,true);
 canvas.beginPath();
 canvas.fillStyle="#0000ff";
 // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
 canvas.arc(x-1,y-1,d,0,Math.PI*2,true);
 canvas.closePath();
 canvas.fill(); 
}

function clear() {
    canvas.fillStyle="#ffffff";
    canvas.fillRect(0,0,width,height);
    canvas.fillStyle="#888888";
    canvas.strokeRect(0,0,width,height);
}

function onClick(e) {
    var element = canvasE;
    var offsetX = 0, offsetY = 0

        if (element.offsetParent) {
      do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
      } while ((element = element.offsetParent));
    }

    x = e.pageX - offsetX;
    y = e.pageY - offsetY;
    
    var xAdapted=(x - 640);
	  var yAdapted=(596-y)-240;
    
		console.log("X:"+xAdapted + "| Y:"+yAdapted);
		
    fbx.set(xAdapted);
		fby.set(yAdapted);
			
     
    drawCircle();
    document.getElementById("info").value = "x: " + x + ", y: " + y;
}

init();


var img = document.createElement('img');
document.body.appendChild(img);
var socket = new WebSocket('ws://163.172.153.182:8002');
socket.onmessage = function(message) {
//		  img.src = 'data:image/jpeg;base64,' + btoa(message.data);
//			console.log(message.data);
    var urlCreator = window.URL || window.webkitURL;
		var imageUrl = urlCreator.createObjectURL( message.data );
    img.src = imageUrl;
};