JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas width="800" height="800" id="canvas" style="background-color: #130613; background: url(http://connect.agariomods.com/LD34/arena1.png); background-size: cover; position:relative; z-index: 10;">
</canvas>
<div style="position:absolute; top:10px; width: 400px;
margin: 20px; display:table; border: 10px solid rgba(0,0,0,0.5); z-index: 2; padding: 20px; background-color: rgba(200,40,40,0.3);color:#fff;
text-shadow: 1px 1px 3px #ff0000;
">
Disconnected from gameserver.<br>
Refresh page to attempt reconnection.<br><br>
<small>LD34. &lt;3 Electronoob</small><br>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1; width: 100%; height: 100%; padding: 0px; margin: 0px;
background: radial-gradient(ellipse at center,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%);
">
&nbsp;
</div>

CSS

body {
  margin: 0px;
  padding: 0px;
  font-size: 20px;
  overflow: hidden;
}
html,body {
    height:100%;
}

JavaScript

var x = 0.0;
  var mX = 300;
  var mY = 300;
  var mM = 0;
  var mR = 0;
  /* sx,sy: pos from server */
  var sX = 0;
  var sY = 0;
  var scale = 100.00;
  var sineoffset = 0.00;


  var canvas = document.getElementById('canvas');
  var screenContext = canvas.getContext('2d');
  var player = document.createElement("canvas");
  var playerContext = player.getContext('2d');
  screenContext.imageSmoothingEnabled  = 0;
  
  var playerWidth = 100;
  var playerHeight = 100;
  player.setAttribute('width', playerWidth);
  player.setAttribute('height', playerHeight);

  var gameStarted = false;

  var imageObj = new Image();
  imageObj.name = "";

  imageObj.onload = function() {
    playerContext.save();
    playerContext.beginPath();
    playerContext.moveTo(playerWidth/2, playerHeight/2);
    playerContext.arc(playerWidth/2, playerHeight/2, (playerHeight + playerWidth /2), 0, 2 * Math.PI);
    playerContext.clip();
    playerContext.globalAlpha = 1;
    playerContext.drawImage(imageObj, 0, 0, playerWidth, playerHeight);
    playerContext.restore();

    playerContext.strokeStyle = 'rgba(' + imageObj.red + ',' + imageObj.green + ',' + imageObj.blue + ',1)';
    playerContext.lineWidth = 3;//= (playerHeight + playerWidth /2) / 100;
    playerContext.beginPath();
   // playerContext.arc(playerWidth/2, playerHeight/2, 32, 0, Math.PI * 2, false);
    playerContext.stroke();
    playerContext.font = ((playerWidth)/6) + "px  'Comic Sans MS', cursive, sans-serif";
    var nameLen = playerContext.measureText(this.name).width;
    playerContext.lineWidth = (playerHeight + playerWidth /2) / 70;
    playerContext.strokeStyle = 'rgba(0,0,0,1)';
    playerContext.strokeText(this.name,playerWidth/2  - (nameLen / 2),  (playerHeight/2) + ((playerWidth)/6));
    playerContext.fillStyle =  'rgba(' + imageObj.red + ',' + imageObj.green + ',' + imageObj.blue + ',1)';
    playerContext.fillText(this.name, playerWidth/2 - (nameLen / 2),  (playerHeight/2)+ ((playerWidth)/6));
  };

 ...