Strange memory increasing in google chrome with Canvas drawImage method

Question

I've developed an application with ~160 image. I'm creating 160 img element and load them. After loading, i'm using HTML5 canvas element, to show them. i'm using drawImage to display images on canvas.

My problem is, that ONLY in google chrome the memory is always increasing. In other browsers (like firefox or IE11), my app using ~260-300 megabytes, but in chrome it uses ~1,4 GB, and this is too much. The memory is increasing only, when i'm invoke the drawImage method. I've tried the canvas context's clearRect method, and i've some try also with re-creating the canvas (remove + append combo).

Is there any possible solution for my problem? Is it a chrome bug? I've tested it with chrome's task manager. I've see, that the image cache is increasing too, but it's not logical for me, because i've loaded the images only 1 time, and i'm just using them with drawImage method.

Thanks, for your experience.

Answer 1

I have a similar problem with an image loop with very big images (3000x2000) to generate a preview before upload:

1. First I load an image (image.src = url).
2. After loading the image I resize it by canvas drawImage (canvas.drawImage(image, ...))
3. Then I take da dataURL from the canvas context.
4. After that I discard the image and the canvas by deleting references.

This results (only in Chrome 35) in a continuous memory consumption and then memory exhaustion. I solved nullifying the image with image.src = null before deleting it.

The very strange behaviour is that if I use DevTools to profile the memory usage (I obviously suspected that was a memory leak generated by my code), memory consumption does not happen anymore and the garbage collector is called always when I delete the image.

Answer 2

I can confirm that this is still an issue almost two years later. Canvas with intensive drawImage causes huge memory bleed in Chrome and there is still no fix despite 25 people confirming this problem in Chrome develop forums.