JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas width="1024" height="768" id="canvas" style="background-color: #130613;">

</canvas>

CSS

body {
  margin: 10px;
  padding: 0px;
}

JavaScript

var x = 0.0;
  var mX = 300;
  var mY = 300;
  var scale = 200.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');

  player.setAttribute('width', 500);
  player.setAttribute('height', 500);

  var gameStarted = false;

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

  imageObj.onload = function() {
    playerContext.save();
    playerContext.beginPath();
    playerContext.moveTo(250, 250);
    playerContext.arc(250, 250, 240, 0, 2 * Math.PI);
    playerContext.clip();
    playerContext.globalAlpha = 1;
    playerContext.drawImage(imageObj, 0, 0, 500, 500);
    playerContext.restore();

    //ctx.fillStyle = 'rgba(0,0,0,0.4)';
    playerContext.strokeStyle = 'rgba('+imageObj.red+','+imageObj.green+','+imageObj.blue+',0.4)';
    playerContext.lineWidth = 20;
    playerContext.beginPath();
    playerContext.arc(250, 250, 230, 0, Math.PI * 2, false);
    playerContext.stroke();

    playerContext.font = "70px verdana";
    var nameLen = playerContext.measureText(this.name).width;


    playerContext.lineWidth = 20;
    playerContext.strokeStyle = 'rgba(20,20,20,0.5)';
    playerContext.strokeText(this.name, 250 - (nameLen / 2), 400);

    playerContext.fillStyle = 'rgba(255,255,255,1)';
    playerContext.fillText(this.name, 250 - (nameLen / 2), 400);

  };
/*
  function init() {
    imageObj.src = 'http://skins.agariomods.com/i/letsplay.png';

    window.requestAnimationFrame(draw);
    document.getElementById('canvas').addEventListener('mousemove', function(evt) {
      var mousePos = getMousePos(canvas, evt);
      //mX = 300; //mousePos.x;
      //mY = 300; //mousePos.y;
    }, false);
  }
*/
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }

  function draw() {
   ...