document.title = 'TV NOIZE ザーザー 砂嵐 ホワイトノイズ';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:none;user-select:none;}';
document.getElementsByTagName('head').item(0).appendChild(style);

var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);


let styleImg = document.createElement('style');
styleImg.innerText = '#demo img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:100vh;opacity:1;cursor:none;}';
document.getElementsByTagName('head').item(0).appendChild(styleImg);
let img = document.createElement('img');
demo.appendChild(img);
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';

let search = location.search.slice(1);
let params = new URLSearchParams(search);
let q = params.get('q');
if(q){
  img.src = q;
}



/*
document.createElement('canvas');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
*/




var div = document.getElementById('demo');
div.appendChild(canvas);

var ctx = canvas.getContext('2d'); 
//var idata = ctx.createImageData(canvas.width, canvas.height);
//var buffer32 = new Uint32Array(idata.data.buffer);
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  console.table({w:canvas.width, h:canvas.height});
}
resize();
window.onresize = resize;

function noise(ctx) {
    
    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        idata = ctx.createImageData(w, h),
        buffer32 = new Uint32Array(idata.data.buffer),
        len = buffer32.length,
        i = 0;

    for(; i < len;)
        buffer32[i++] = ((255 * Math.random())|0) << 24;
    
    ctx.putImageData(idata, 0, 0);
}

var toggle = true;

// added toggle to get 30 FPS instead of 60 FPS
(function loop() {
    toggle = !toggle;
    if (toggle) {
        requestAnimationFrame(loop);
        return;
    }
    noise(ctx);
    requestAnimationFrame(loop);
})();




// ファイルアップロード
var dragArea = document.getElementById('demo');
dragArea.classList.add('ready');
dragArea.addEventListener('dragstart', function(event){
  event.dataTranfer.addElement(container);
});
dragArea.addEventListener('dragover', function(event){
  event.preventDefault();
  this.classList.add('drag');
});
dragArea.addEventListener('dragleave', function(event){
  event.preventDefault();
  this.classList.remove('drag');
});
dragArea.addEventListener('drop', function(event){
  event.preventDefault();
  this.classList.remove('drag');
  console.log(event.dataTransfer.files);
  if(!event.dataTransfer.files.length){
    return;
  }
  var file = event.dataTransfer.files[0];
  fileName = file.name.substring(0,12).split('.')[0] || 'name';
  console.log(file);

  var reader = new FileReader();
  reader.readAsDataURL(file)

  reader.addEventListener('load', function(){
    var dataURL = reader.result;
    console.log(dataURL);

    var newImage = new Image();
    img.src = dataURL;
    newImage.src = dataURL;
    newImage.onload = function(){
    }
  });
});


let opacity = 1;
img.addEventListener('click', function(ev) {
  opacity -= 0.2;
  if(opacity < 0.4){
    opacity = 1;
  }
  img.style.opacity = opacity;
}, false );




document.oncontextmenu = function () {return false;}

window.addEventListener('click', function() {
  resize();
  document.body.requestFullscreen();
  for(let i=0;i<9;i++){
    let bgm = new Audio("tv-noize.mp3");
    bgm.currentTime = i;
    bgm.loop = true;
    bgm.volume = 0.01;
    bgm.play();
  }
}, false );

window.addEventListener('dblclick', function() {
  //document.body.requestFullscreen();
  //canvas.requestFullscreen();
  //document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
}, false );

document.addEventListener('fullscreenchange',function(e){
  resize();
});
//全画面にするとノイズが表示されない
//また通常時でもノイズは画像をコピーで再現されない

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-canvas-tv-noize/