Javascript / canvas game memory leak

[blobspamzuulord]

I've been working on a simple canvas game and have run into a problem :/

 

Here it is --- http://users.sussex.ac.uk/~bc216/AXOLOTLBASS/

Here's a link to the code on github https://github.com/BB-000/Axolotl-Bass-in-Space/tree/master/js

It uses the metronome example from this Web Audio tutorial http://www.html5rocks.com/en/tutorials/audio/scheduling/

 

 

Everything works fine on my macbook pro when run on my local server, however when I uploaded it live to the web it sometimes starts struggling after about 10 minutes of running the audio starts to crackle and eventually stop. I tested it on some slower laptops and it struggled a lot more - took a couple of minutes before the audio crackled / cut out and and started to lag. This makes me pretty sure it's a memory leak causing this. I did some profiling and fixed the way the entity images were handled, used a resource loading class instead of using new Image() each time. This fixed the dom node problem on the timeline :

 

Before

After 

 

But the problem still occurs, the memory usage still slowly creeps up. The memory snapshots show some image elements in the detached dom tree in red :

 

heap snapshot

 

 

- Does this mean the entity images are somehow not getting removed properly or are being duplicated still?

 

- Or could the problem be my removal of entities using Array.splice[index] ? I've read this can cause problems but thought my game was too small / simple for this to be the case?

 

 

 

Here is the relevant code for dealing with entities (they are spawned by pushing them onto the monsters[] array)

 

    // in the monster's update function

    if (this.isDead === true) {

        if (barNumber % this.barTiming === 0)

            if (current16thNote % this.timing === 0) {  //  Waits until it's queue to disappear and play it's sound

                score += this.points;

                this.toRemove = true;  //  sets to remove to true, read this could solve some problems // 

                playSoundDelay(samplebb[this.sound], this.channel);

            }

    }



    // monster's render function, (thought this could be something to do with it if the image elements are the problem)

      render: function (ctx) {

    if (this.isDead === false) {

        ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey);

    } else if (this.isDead === true) {  //  if monster is dead, make it translucent

        ctx.save();

        ctx.globalAlpha = 0.4;

        ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey);  // resources.js is an asset loading library 

        ctx.restore();

    }

    }





    // One type of entity

    var Shark = function (position) {

    this.x = position.x;

    this.y = position.y;

    this.sizex = 64;

    .....  .....

    this.speed = Math.random() * (120 - 50) + 50;

    this.monsterImage = "images/Shark.png";  //  the url to be passed into the resource.get call

    };

    Shark.prototype = Object.create(MonsterMove2.prototype);







    function updateEntities(dt) {

    for (var x=0; x < monsters.length; x++) {

    var monster = monsters[x];

    monster.update();

    if (typeof monster.move === 'function') {

        if (!monster.isDead) {  //  If entity is alive, chase the player

            monster.move(dt);

        }

    }

    if (monster.toRemove){

        monsters.splice(x,1);  //  Removes the monster from the array

    }

    }

Thanks in advance if anyone can point me in the right direction!! This has been driving me mad for a while! 

[blobspamzuulord]

Entities were fine, it was a stray oscillator node not being disconnected from the audio context..!!!