JS Webcam Canvas Snow Ball FX SRC

  <body bgcolor="black">
  <canvas id="canvas"></canvas>
<center>
<body onmousemove="drawe();" onmousedown="drawe" onmouseup="drawe" ommouseover="drawe" onchange="drawe" onload="drawe" onpaint="drawe" ondoubleclick="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.strokeStyle="#"+text;
ctx.moveTo(Math.random()*event.x-11,Math.random()*event.x/500);
ctx.lineTo(Math.random()*event.y*11,Math.random()*event.y+500);
ctx.topmost=false;

ctx.stroke();
text='';
}
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
if(ctx.width==500){event.mouseMove++;}
video.src = this.window.URL.createObjectURL(stream);
    var store =video.src;
video.play();
video.addEventListener("play", function() {i = window.setInterval(function() {
canvas.style.opacity-=0.1
canvas.style.opacity++;
  ctx.topmost=false;
ctx.drawImage(video,1,1,500,500)},5);
ctx.draw();
drawe;
}, false);
  window.onkeydown=function(){
    this.video.src=('');
    this.video.pause();
    alert('Click Any Place To Restart Webcam/Effect!!')

  }
    window.onclick=function(){
   this.video.src=(store);
    this.video.play();

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

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

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 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 size=10;
var offsetX = 0,
    offsetY = 0;

function draw() {
 clear();
 offsetX+=2;
 offsetY+=22;
 var x = Math.sin(WIDTH + offsetX * TO_RADIANS) * WIDTH/4;
 var y = Math.sin(HEIGHT + offsetY * TO_RADIANS) * HEIGHT/4;
 ctx.fillStyle = 'white';
 size--;
 circle(x,y,size--,size++)
 circle(x,y,size++,size++);
 offsetX += 32;
 raf(draw,3)
 if(size==32){
 size++;
 }
 else{
 size--;
 }
}

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