What is a memory leak when using getImageData, javascript, HTML5 canvas

Question

I am working with a canvas element and trying to do some pixel-based image manipulation using Javascript in FIrefox 4.

The following code is a memory leak, and I wondered if anyone could help determine what was leaking.

The images used are preloaded, and this code fragment is called after they are downloaded (to the pImages array).

var canvas = document.getElementById('displaycanvas'); if (canvas.getContext){ var canvasContext = canvas.getContext("2d"); var canvasWidth = parseInt(canvas.getAttribute("width")); var canvasHeight = parseInt(canvas.getAttribute("height")); // fill the canvas context with white (only at start) canvasContext.fillStyle = "rgb(255,255,255)"; canvasContext.fillRect(0, 0, canvasWidth, canvasHeight); // for image choice var photoIndex; // all images are the same width and height var imgWidth = pImages[0].width; var imgHeight = pImages[0].height; // destination coords var destX, destY; // prep some canvases and contexts var imageMatrixCanvas = document.createElement("canvas"); var imageMatrixCanvasContext = imageMatrixCanvas.getContext("2d"); // Set the temp canvases to same size - apparently this needs to happen according // to one comment in an example - possibly to initialise the canvas? imageMatrixCanvas.width = imgWidth; imageMatrixCanvas.height = imgHeight; setInterval(function() { // pick an image photoIndex = Math.floor(Math.random() * 5); // fill contexts with random image imageMatrixCanvasContext.drawImage(pImages[photoIndex],0,0); imageMatrixData = imageMatrixCanvasContext.getImageData(0,0, imgWidth, imgHeight); // do some pixel manipulation // ... // ... // choose random destination coords (inside canvas) destX = Math.floor(Math.random() * (canvasWidth - imgWidth)); destY = Math.floor(Math.random() * (canvasHeight - imgHeight)); // show the work on the image at the random coords canvasContext.putImageData(imageMatrixData, destX, destY); }, 500); } 

Answer 1

Changing imageMatrixData = ... to var imageMatrixData = ... may help a little, but I doubt this is a complete story. But as far as I can tell, imageMatrixData is a global scope variable that you assign at each iteration of the intervals and which cannot be healthy, especially with a lot of data :)

I know that getImageData used for memoryleak in Chrome, but that was before version 7, I don’t know how this is happening now, and seeing that you are talking about ff4, this is probably very inappropriate.

Answer 2

Oh .. mistake. After several tests, the memory looks fine.
But there is one more problem.
The size of the used memory by tab increases when the src property of the img elements changes

 Src property = canvas.getContext('2d').toDataURL('image/png') (changing each time); 

I tried "remove img.src", remove node ...