Redraw function on canvas html5 element, endlessly execute

im trying to achieve a click functionality that triggers a "active"- state for one of my svg buildings on my canvas element, this worked before with the same code before i put the for-loop and if-statements, to get a pulsating effect on the buildings. However now, when i want the clicked object only to get this effect, it endlessly triggers the call in the console, and the element moves like intended, but never gets the intentional scaleing aspect

I've tried putting for loops, to set one of the objects in an array to active, which it does, but it doesn't do the correct animations with translate, and scale. The translate part work, but not the pulsating scale part.

Before the following code was put into for / if statements, the effect was achieved, but not anymore... Could anyone help me see the issue? I've been at it for a while, but can't seem to fix it.

var ctx;
var canvas = document.getElementById("hotellCanvas");

const cities = [
    { x:360, y:210 },
    { x:450, y:125 },
    { x:550, y:150 },
    { x:283, y:85 },
    { x:160, y:150 }
];

const stars = new Image();
stars.src = "assets/Stars.png";

var mx = 0;
var my = 0;
var activeSkyscraperIndex = -1; // Initially, no active skyscraper.

function mouseMove(e) {
    var rect = e.target.getBoundingClientRect();
    mx = e.clientX - rect.left;
    my = e.clientY - rect.top;
}

//This function is called by the onmousemove event for the canvas element 
function mouseDown(event) {
    event.preventDefault();

    if (event.which == 1) {
        for (let i = 0; i < cities.length; i++) {
            if (
                mx > cities[i].x + 12 &&
                mx < cities[i].x + 55 &&
                my > cities[i].y + 0 &&
                my < cities[i].y + 85
            ) {
                activeSkyscraperIndex = i;
            }
        }
        redraw();
    }
}

function redraw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.scale(.90, .90);
    ctx.translate(80, 20);
    drawMap();
    ctx.restore();

    var v = 0;
    var x = 0;

    v = v + 0.025;
    x = Math.sin(v) * 0.015;

    for (let i = 0; i < cities.length; i++) {
        ctx.save();
        ctx.translate(cities[i].x, cities[i].y);
        ctx.translate(stars.x, stars.y);

        if (i === activeSkyscraperIndex) {
            ctx.scale(.25 + x, .25 + x);
            ctx.translate(0, -50 - x);
            console.log('i: ', i);
            console.log('activeSkyscraperIndex: ', activeSkyscraperIndex);
            console.log('City: ', cities[i]);
        } else {
            ctx.scale(0.25, 0.25);
        }

        drawSkyScraper();
        ctx.translate(100, -100);
        drawPixel();
        ctx.restore();
    }

    window.requestAnimationFrame(redraw);
}

canvas.addEventListener('mousedown', mouseDown);

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    redraw();
    window.requestAnimationFrame(animate);
}

function startcanvas() {
    var canvas = document.getElementById("hotellCanvas");
    ctx = canvas.getContext("2d");
    canvas.addEventListener('mousemove', mouseMove);
    redraw();
    animate();
}

The for / if - loop code inside of the function redraw, where i use console.log is where it shows the endless executing loop in the console, any ideas on how to fix this?

Console, after clicked element