JS Canvas Webcam New FXXXXX For Christmas

<style>
body{


 filter:invert(1800);
  filter:brightness:(3333);
}

</style>

<center>
<body onload="setInterval(drawe,33)" bgcolor="black">
<video id="video" autoplay hidden>
</video>
<canvas id="canvas" width="500" height="500" style="drawColor:#FFFFFF">
<script>
  var inn=prompt("Enter Text:")
var video = document.getElementById("video");
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var i=0;
var mediaConfig = { video:true,audio:true};
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
video.src = this.window.URL.createObjectURL(stream);
video.play();
  video.addEventListener("play", function() {i = window.setInterval(function() {
ctx.drawImage(video,0,0)},40);
ctx.topmost=false;
ctx.draw();
}, false);
});

var ii=50;
function drawe(){
ii++;
var text = "";
var possible = "FABCGDE0123456789";
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
for(var i=0; i!=6; i++)
text+=possible.charAt(Math.floor(Math.random()*possible.length));
ctx.font="35px Sans Serif";
ctx.fillStyle="#"+text;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.fillText(""+inn,Math.random()*ii+1,Math.random()*ii+1,Math.random()*ii,Math.random()*ii+1,ii+1);
//ctx.rotate(18,Math.PI/180)
text='';
}
</script>
  <canvas id="canvas"></canvas>

<script>
 var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    HEIGHT = window.innerHeight,
    WIDTH = window.innerWidth,
    TO_RADIANS = Math.PI / 368;

var raf = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 10000);
          };
})();

function clear(style) {
  ctx.save();
  ctx.fillStyle = style || 'rgba(0,0,0,0.01)';
  ctx.fillRect(0, 0, WIDTH, HEIGHT);
  ctx.restore();
}

function square(x, y, w, h) {
  ctx.beginPath();
  ctx.rect(WIDTH/2 + x, HEIGHT/2 + y, w, h);
  ctx.closePath();
  ctx.fill();
}
//function render(){
//ctx.drawRect(WIDTH/2+x,HEIGHT/2+y,w,0,Math.PI*2,true);
//}
function circle(x, y, w, h) {
  ctx.beginPath();
  ctx.arc(WIDTH/2 + x, HEIGHT/2+ y, w, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

canvas.width = WIDTH;
canvas.height = HEIGHT;

var offsetX = 0,
    offsetY = 0;

function draw() {
  clear();

  offsetX+= 2;
  offsetY+=2;
  var x = Math.sin(WIDTH + offsetX * TO_RADIANS) * WIDTH/4;
  var y = Math.sin(HEIGHT + offsetY * TO_RADIANS) * HEIGHT/4;

  ctx.fillStyle = 'white';
  circle(x, y, 42, 10);
  offsetX += 25;

  raf(draw, 285);
}

clear('black');
draw();
</script>

</script>