modifying the amount of bars of a visualizer depending of the zoom level

Question

I have a visualizer on my website and I want to make it so that the amount of bars being displayed changes with the zoom level (the more zoomed out you are, the more bars there will be)

is there a way to do detect the zoom level to do that?

edit:

here's the code that creates the visualizer:

var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
    function initVisualizer() {
        context = new AudioContext();
        analyser = context.createAnalyser();
        biquad = context.createBiquadFilter();
        gainNode = context.createGain();
        canvas = document.getElementById("visualizer");
        ctx = canvas.getContext('2d');
        ctx.fillStyle = "#3f3f3f";


        analyser.smoothingTimeConstant = 0.8;
        biquad.frequency.value = 15000;
        gainNode.gain.value = 1;

        source = context.createMediaElementSource(Musique);
        source.connect(biquad);
        biquad.connect(gainNode);
        gainNode.connect(analyser);
        analyser.connect(context.destination);

        $("#frequencyNumber").html(biquad.frequency.value);
        $("#visualizerSensibilityNumber").html(analyser.smoothingTimeConstant);
        $("#gainNumber").html(gainNode.gain.value.toPrecision(3));

        framelooper()
    }

    function framelooper() {
        window.requestAnimationFrame(framelooper);
        fbcArray = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(fbcArray);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        bars = 50;
        for (i=0; i < bars; i++) {
            bar_x = i * 6;
            bar_width = 5;
            bar_height = -(fbcArray[i] / 1.75); //6 //1.75

            if (visualizerStyle == 1){
                //Simple
                ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
                $("#visualizerStyleType").html("Simple");
            }
            else if (visualizerStyle == 2) {
                //Reflection
                ctx.fillRect(bar_x, canvas.height/2, bar_width, bar_height/2);
                ctx.fillRect(bar_x, canvas.height/2, bar_width, -bar_height/2);
                $("#visualizerStyleType").html("Reflection");
            }
            else {
                //Two-faced
                ctx.fillRect(0, bar_x, -bar_height, bar_width);
                ctx.fillRect(canvas.width, bar_x, bar_height, bar_width);
                $("#visualizerStyleType").html("Face to Face");
            }
        }
    }

I need to change the variable bars, I know how I'l do that part though (Math.floor(50/[zoom level])

edit 2:

I've tried some things and I'm running into a few problems: first one is, I have this function:

//scrolling information
var iScrollPos = 0;
var zoomLevel = 1;
$(function() {
    $(window).scroll(function () {
        var iCurScrollPos = $(this).scrollTop();

        if (iCurScrollPos > iScrollPos && event.ctrlKey) {
            //Scrolling Down
            zoomLevel-=0.2;
            alert("Scrolled Down");
        }
        else {
            //Scrolling Up
            if (event.ctrlKey) {
                zoomLevel+=0.2;
                alert("Scrolled Up");
            }
        }
        iScrollPos = iCurScrollPos;
    }).triggerHandler("scroll");;
});

that I want to use to detect when the user is scrolling, but that doesn't seem to work

the second problem is, I'm having trouble finding how to change bar_width to display all the bars:

bars = Math.floor(50/zoomLevel);
for (i=0; i < bars; i++) {
    bar_width = (canvas.width/bars)/1.1;
    bar_x = i * 6;
    bar_height = -(fbcArray[i] / 1.75);

I know I need to use canvas.width/bars instead of 6 but I'm missing something