Jump to content

Javascript / canvas game memory leak


Recommended Posts

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


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 :







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.globalAlpha = 0.4;
        ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey);  // resources.js is an asset loading library 

    // 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];
    if (typeof monster.move === 'function') {
        if (!monster.isDead) {  //  If entity is alive, chase the player
    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! 

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...