JS Webcam Kool Rendering FX FINAL

<style>
body{
 overflow: visible;
 position:center;
 filter:saturation:(222);
 filter:invert(1.0);
}
.container{
 position: center;
 width: Math.random()*5vmax+1vmax;
 height: Math.random()*15vmax+10vmax;

}
</style>
<center>
<body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
<video id="video" autoplay hidden>
</video>
<canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
<script>
var ii=1;
var video = document.getElementById("video");
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true,audio:false};
function drawe(){
var possible = "FABCGDE0123456789";
var text = "";
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.fillStyle="#"+text;
ctx.beginPath();
ctx.arc(event.x,event.x,event.x,event.x,event.y);
ctx.fill();
ctx.topmost=true;
ctx.stroke();
//text='';
}
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
if(ctx.width==500){event.mouseMove++;}
video.src = this.window.URL.createObjectURL(stream);
video.play();
video.addEventListener("play", function() {i = window.setInterval(function() {
canvas.style.opacity-=0.1
canvas.style.opacity++;
ctx.topmost=false;
ctx.drawImage(video,0,1,500,500)},1000);
0
drawe;
}, false);
});
</script>
  <center>
<body bgcolor="#000000" onload="setInterval('t();',13033)"/>
<canvas id="canvas" width="5000" height="5000" style="border:4px; background-color:black"></canvas>
<script>
function t(){
  var canvas = document.querySelector('#canvas').getContext('2d'),side = 0,
    size = Math.random()*100,
    x = Math.random()*100,
    y = Math.random()*100;

canvas.beginPath();
canvas.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

for (side; side < 14+1; side++) {
  canvas.lineTo(x+Math.floor(Math.random()*8) + Math.random()*Math.sqrt(3339) * Math.cos(side * 6 * Math.PI / 14), y + size * Math.sin(side * 8 * Math.PI / 14));
}

canvas.fillStyle = "#0FF333";
canvas.fill();
canvas.draw();
}
</script>
 <body bgcolor="white"/>
 <canvas id="canvas"></canvas>

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

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

function clear(style) {
  ctx.save();
  ctx.fillStyle = style || 'rgba(233,34,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/4 + y+y, w, h);
  ctx.closePath();
  ctx.fill();
}

function circle(x, y, w, h) {
  ctx.beginPath();
  ctx.arc(WIDTH/4 - x, HEIGHT/4+ 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++;
  var x = Math.sin(WIDTH - offsetX * TO_RADIANS) * WIDTH/4;
  var y = Math.sin(HEIGHT - offsetY * TO_RADIANS) * HEIGHT/4;

  ctx.fillStyle = ;
  circle(x, y,14, 10);
  offsetX += 872;

 0
  raf(draw, 1000);
}

clear('white');
draw();
</script>
  <style>
canvas{
filter:invert(433%);
filter:saturate(1114%);

}
</style>
<center>
<body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
<video id="video" autoplay hidden>
</video>
<canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="1000" height="1000" style="opacity:1.0;fillColor:none; width:500px">
<script>
var i=22
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var video = document.getElementById('video');
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,i,i,500,500)},Math.random()*1000);
ctx.draw();
},true);
});
</script>
</body>
</html>>
</body>
</html>