1

I wan't to ask about animating Canvas by JavaScript and about Garbage Collection. I've wrote code to display rectangle:

function Test() {
  var canvas = document.getElementById('mygame'),
      ctx = canvas.getContext('2d');

  function update() {
    ctx.fillRect(20,20,150,100);
    window.requestAnimationFrame(update);
  }

  update();

}

Test();

It's very simple. Now lets take a look at "Performance" tab in Chrome:

MinorGc

As you can see, the JS Heap graph is still not looking smooth. Even when there is a very simple code, GC (for some reason) is doing cleaning by using Minor GC (for example "989KB collected").

Is there possibility to avoid this? Or there will be always some GC and it's a natural thing?

Amay
  • 1,461
  • 5
  • 27
  • 56
  • As long as you are allocating memory there will be garbage collections. But you should only be concerned about them if they cause significant pause times. – the8472 Dec 08 '17 at 22:43
  • Each time a function is called it needs to create a context. Rather than delete that context on exit, that memory remains on the heap. It accumulates over time until GC cleans it up. There is nothing you can do about it, its how JS works. – Blindman67 Dec 09 '17 at 23:04
  • Related [question](https://stackoverflow.com/q/17382321/1804173), not specifically using canvas. – bluenote10 Jan 18 '21 at 22:12

0 Answers0