Styjun

I am trying to build a music sharing platform with an audio spectrum visualizer display in a canvas, everything works well when the canvas height is set to 350px but when reduced, the bars seem to be flying away, I tried to adjust everything I can from the javascript (main.js) but no progress, please help!

My HTML code with the adjusted canvas dimension is below:

<link rel="stylesheet" type="text/css" href="style.css">

 <canvas id='canvas' width="450px" height="150px"></canvas>
 <br>
 <br>
 <audio src="assets/sample.mp3" id="audio" controls> </audio>
 <script src="main.js"></script>

This is the main.js javascript file

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

window.onload = function() 
 var audio = document.getElementById('audio');
 var ctx = new AudioContext();
 var analyser = ctx.createAnalyser();
 var audioSrc = ctx.createMediaElementSource(audio);
 // we have to connect the MediaElementSource with the analyser 
 audioSrc.connect(analyser);
 analyser.connect(ctx.destination);
 // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
 // analyser.fftSize = 64;
 // frequencyBinCount tells you how many values you'll receive from the analyser
 var frequencyData = new Uint8Array(analyser.frequencyBinCount);

 // we're ready to receive some data!
 var canvas = document.getElementById('canvas'),
 cwidth = canvas.width,
 cheight = canvas.height - 2,
 meterWidth = 10, //width of the meters in the spectrum
 gap = 2, //gap between meters
 capHeight = 2,
 capStyle = '#fff',
 meterNum = 800 / (10 + 2), //count of the meters
 capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
 ctx = canvas.getContext('2d'),
 gradient = ctx.createLinearGradient(0, 0, 0, 300);
 gradient.addColorStop(1, '#0f0');
 gradient.addColorStop(0.5, '#ff0');
 gradient.addColorStop(0, '#f00');
 // loop
 function renderFrame() 
 var array = new Uint8Array(analyser.frequencyBinCount);
 analyser.getByteFrequencyData(array);
 var step = Math.round(array.length / meterNum); //sample limited data from the total array
 ctx.clearRect(0, 0, cwidth, cheight);
 for (var i = 0; i < meterNum; i++) 
 var value = array[i * step];
 if (capYPositionArray.length < Math.round(meterNum)) 
 capYPositionArray.push(value);
 ;
 ctx.fillStyle = capStyle;
 //draw the cap, with transition effect
 if (value < capYPositionArray[i]) 
 ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
 else 
 ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
 capYPositionArray[i] = value;
 ;
 ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
 ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
 
 requestAnimationFrame(renderFrame);
 
 renderFrame();
 audio.play();
;

I just need help on making sure the bars don't fly away when canvas is resized, thanks!