JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id='hlb'   width='800px' height='600px'></canvas>
<canvas id='hg'   width='800px' height='600px'></canvas>
<canvas id='hl'   width='800px' height='600px'></canvas>
<canvas id='view' width='800px' height='600px'></canvas>

CSS

canvas {
position: absolute;
left: 0px;
top: 0px;
}
canvas#hg {
  z-index: -1;
  filter: blur(10px);
}
canvas#hl {
  z-index: 2;
  filter: blur(4px);
}
canvas#hlb {
  filter: blur(10px);
}
body {
  background-color: #000;
}

JavaScript

var ctx = view.getContext("2d"); // scene
var hgctx = hg.getContext("2d"); // head glow layer
var hlctx = hl.getContext("2d"); // head laser layer
var hlbctx = hlb.getContext("2d"); // head laser burn target layer
var img = new Image();
img.crossOrigin = "Anonymous";
var offset = 0;
var kx = 5;
var ky = 3;
var gaze = [];
gaze.push('up');
gaze.push('none');
gaze.push('up');
gaze.push('up');
gaze.push('up');
gaze.push('mid');
gaze.push('mid');
gaze.push('up');
gaze.push('up');
gaze.push('mid');
gaze.push('up');
gaze.push('mid');
gaze.push('mid');
gaze.push('up');
gaze.push('none');
gaze.push('up');
  var gazex = 100;
  var gazey = 50;
  var gazeyrandom = 0;
img.src = 'http://botb.iomods.com/jsfiddle/qxwvzne.png';
offset = 0;
offset2 = 0;
var draw = function () {
  ctx.clearRect(0,0,800,600);
  
  newx = Math.cos(offset2 * kx) * 50 + 500;
  newy = Math.sin(offset2 * ky) * 150 + 200;
  newx = Math.floor(newx);
  newy = Math.floor(newy);
  ctx.drawImage  (img,offset * 189*.75,0, 189*.75, 277*.75, newx,newy,189*.75,277*.75);
  
  hgctx.fillStyle = 'rgba(0,0,0,0.05)';
  hgctx.fillRect(0,0,800,600);
  hgctx.fillStyle = 'rgba(77, 37, 09, 1)';
  hgctx.beginPath();
  hgctx.arc(newx+75,newy+200,50,0,2*Math.PI);
  hgctx.fill();
  
  hlctx.clearRect(0,0,800,600);
	var burnx = gazex + r(0,30);
  var burny = gazey + r(0,30);
  if(gaze[offset] !== 'none') {
    if(gaze[offset] == 'up') {
    	gazey = 50 + gazeyrandom;
    }
    if(gaze[offset] == 'mid') {
    	gazey = 550 - gazeyrandom;
    }
    
    hlctx.beginPath();
    hlctx.moveTo(burnx, burny);
    hlctx.lineTo(newx+34+ r(0,5),newy+116+ r(0,5));
    hlctx.strokeStyle = 'rgba(255,255,255,0.5)';
    hlctx.lineWidth =10;
    hlctx.stroke();
    hlctx.beginPath();

    hlctx.moveTo(burnx, burny);
    hlctx.lineTo(newx+78+ r(0,5),newy+116+ r(0,5));
    hlctx.strokeStyle = 'rgba(255,255,255,0.5)';
    hlctx.lineWidth =10;
    hlctx.stroke();
  } else {
  	gazex = r(20,400);
    gazeyrandom = r(0,100);
  }
 ...