JS Bad Ass Webcam FX SRC FINAL!!!!!

<style>
canvas{
filter:invert(44233%);
filter:saturate(000%);
}
</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,1,1,1000,1000)},Math.random()*10.000000000000000000000000000000000000000000000000000000000000000000000001);
ctx.draw();
},true);
});
</script>
</body>
</html>
  <center>
<body bgcolor="#000000" onload="setInterval('t();',1333)"/>
<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 = 100,
    x = 100,
    y = 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/2 + y, w, h);
  ctx.closePath();
  ctx.fill();
}

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

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

var offsetX = 10,
    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 = 'red';
  circle(x, y, 24, 20);
  offsetX += 2;


  raf(draw, 16);
}

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

}
</style>
</html>
<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)},100);
ctx.draw();
},true);
});
</script>
</body>
</html>>
</body>
</html>
  <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,50)},100);
ctx.draw();
},true);
});
</script>
</body>
</html>>
</body>
</html>