JavaScript Help, Image Generation with Canvas and MediaRecorder

Hi i will Generate a Noisy Image with Canvas from a Audiostream in JavaScript. I have this Working Code that Generates a Random Noise Image.

function jscreen() {
   setTimeout(fixInline, 60);
   _gaq.push(['_trackEvent', 'jscreen']);
   repositionComponents();
}

function repositionComponents() {

   var position = $("#canvasFrame").position();
   var horizontalMid = window.innerWidth / 2;
   var verticalMid = window.innerHeight / 2;
}

function fixInline() {
   repositionComponents();
   updateTimer = setInterval(drawInline, 5);
}

function drawInline() {
   draw(document.getElementById("canvas"));
}

function draw(cvs) {

   var ctx = cvs.getContext("2d");

   var blockSize = 256;
   var imageData = ctx.createImageData(blockSize, blockSize);
   for (var i = 0; i < blockSize * blockSize; i++) {
      var p = i * 4;
      imageData.data[p + 0] = Math.random() >= 0.5 ? 255 : 0;
      imageData.data[p + 1] = Math.random() >= 0.5 ? 255 : 0;
      imageData.data[p + 2] = Math.random() >= 0.5 ? 255 : 0;
      imageData.data[p + 3] = 255;
   }

   for (var y = 0; y < cvs.height; y += blockSize) {
      for (var x = 0; x < cvs.width; x += blockSize) {
         ctx.putImageData(imageData, x, y);
      }
   }
}

Now I will get the Audiostream from a Mikrophone and Generate the Image from this. Maybe replace the Math.Random or Image Data I don't know. The Audio should not be recorded to a File just put the stream to the canvas. I have this Recording Code.

navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {
    rec = new MediaRecorder(stream);
    rec.ondataavailable = e => {
        audioChunks.push(e.data);
        rec.start();
    }
})

How can I do this ?