Sign in to follow this  

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



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 // 

    // 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! 

Share this post

Link to post
Share on other sites

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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.