<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function drawcanvas() {
var oImage = new Image();
oImage.onload = function() {
console.log('image loaded');
// tile size in pixels, the image loaded is 23552 x 8192, which has 23 x 8 tiles
var tileSize = 1024;
// create a canvas that is not on DOM
var hiddenCanvas = document.createElement('canvas');
hiddenCanvas.width = tileSize;
hiddenCanvas.height = tileSize;
var hiddenContext = hiddenCanvas.getContext('2d');
// create another canvas that is not on DOM
var masterCanvas = document.createElement('canvas');
masterCanvas.width = tileSize;
masterCanvas.height = tileSize;
var masterContext = masterCanvas.getContext('2d');
// 1) drawing one tile, 1024 x 1024, from the big image into a canvas that is 1024 x 1024
// this causes negligible memory increaase by itself
hiddenContext.drawImage(oImage, 0, 0, tileSize, tileSize, 0, 0, tileSize, tileSize);
// 2) copy the 1024 x 1024 canvas into another canvas that is 1024 x 1024
// this causes about 700MB of memory usage in both Chrome & Firefox on Mac
masterContext.drawImage(hiddenContext.canvas, 0, 0, tileSize, tileSize, 0, 0, tileSize, tileSize);
console.log('processing done');
};
oImage.src = "http://i.imgur.com/VcIOEJF.png";
}
</script>
</head>
<body>
<ul>
<li>Open Activity Monitor or some other tool to monitor memory usage of a process</li>
<li>Click button below and watch >700MB increase of the Chrome/Firefox process (look for Google Chrome Helper or Firefox)</li>
<li>Why?</li>
</ul>
<button type="button" onclick="drawcanvas()">Start and watch for >700MB memory usage increase</button>
</body>
</html>
// Code goes here
/* Styles go here */