Почему пиксели, полученные с холста, все черные?

Question

В качестве упражнения, я хотел бы, чтобы заполнить фон окна браузера с пикселями случайного цвета: https://jsfiddle.net/j8fay7bs/3/

Моим вопрос заключается в том, чтобы получить текущее наполнение фонового изображения и случайным образом изменить пиксели? В настоящее время изображение, кажется, вернулось к черному.

// redraw canvas pixels on resize -------------------------- 
var render = function resize() { 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    context.canvas.width = window.innerWidth; 
    context.canvas.height = window.innerHeight; 
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

    var t0 = performance.now(); 
    for (var i = 0; i < canvas.width*canvas.height; i++) { 
     if (Math.random() < 0.5) { 
      imageData.data[i*4] = Math.round(Math.random()*255); 
      imageData.data[i*4+1] = Math.round(Math.random()*255); 
      imageData.data[i*4+2] = Math.round(Math.random()*255); 
      imageData.data[i*4+3] = 255; 
     } 
    } 
    context.putImageData(imageData, 0, 0); 
    $('#fps').text(1000/(performance.now() - t0) + " fps"); 
} 
window.onresize = render; 

// rendering loop --------------------------------------- 
(function loop() { 
    setInterval(render, 10); 
})(); 

Answer 1

Вы можете получить данные с последнего изображения, перед тем дотронешься ширину холста и высоту,

как только у прикоснулся к ним, полотно будет обнулен:

var render = function resize() { 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 

    var oldImageData = context.getImageData(0, 0, canvas.width, canvas.height); // <---- 

    context.canvas.width = window.innerWidth; 
    context.canvas.height = window.innerHeight; 
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

updated fiddle