- Make ImageTileSource.freeupCanvasMemory method private and call it from ImageTileSource.destroy for consistency.

- Add comment to memorycheck-with-simple-image demo how to reproduce the problem.
- Simplify memorycheck-with-simple-image demo.

src/imagetilesource.js

@@ -196,16 +196,11 @@
             return context;
         },
         /**
-         * Free up canvas memory
-         * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory,
-         * and Safari keeps canvas until its height and width will be set to 0).
+         * Destroys ImageTileSource
          * @function
          */
-        freeupCanvasMemory: function () {
-            for (var i = 0; i < this.levels.length; i++) {
-                this.levels[i].context2D.canvas.height = 0;
-                this.levels[i].context2D.canvas.width = 0;
-            }
+        destroy: function () {
+            this._freeupCanvasMemory();
         },
 
         // private
@@ -270,7 +265,19 @@
                 bigContext = smallContext;
             }
             return levels;
-        }
+        },
+        /**
+         * Free up canvas memory
+         * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory,
+         * and Safari keeps canvas until its height and width will be set to 0).
+         * @function
+         */
+        _freeupCanvasMemory: function () {
+            for (var i = 0; i < this.levels.length; i++) {
+                this.levels[i].context2D.canvas.height = 0;
+                this.levels[i].context2D.canvas.width = 0;
+            }
+        },
     });
 
 }(OpenSeadragon));

src/viewer.js

@@ -742,8 +742,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             return;
         }
 
-        if (this.source.freeupCanvasMemory) {
-            this.source.freeupCanvasMemory();
+        //TODO: implement destroy and _freeupCanvasMemory method for all child classes of TileSource, then remove if statement wrap below.
+        if (this.source.destroy) {
+            this.source.destroy();
         }
 
         this.close();

test/demo/memorycheck-with-simple-image.html

@@ -16,6 +16,9 @@
     <div>
         Simple demo page to monitor OpenSeadragon Memory Usage.
     </div>
+    <!-- To get "Total canvas memory use exceeds the maximum limit" warning and then "null is not an object (evaluating 'smallContext.drawImage')" error,
+    disable _freeupCanvasMemory method in ImageTileSource,
+    then click Create button below 12 times on "iPad Air (3rd generation) -- 13.3" Simulator on Mac with Web Inspector by Safari. -->
     <button onclick="createViewer()">Create</button>
     <button onclick="destroyViewer()">Destroy</button>
 
@@ -24,13 +27,6 @@
 
         var _viewer;
 
-        var generateUniqueHash = (function() {
-            var counter = 0;
-            return function() {
-                return "openseadragon_" + (counter++);
-            };
-        })();
-
         function createViewer() {
             if ( _viewer ) {
                 destroyViewer();
@@ -39,8 +35,6 @@
             _viewer = OpenSeadragon({
                 element: document.getElementById("contentDiv"),
                 showNavigationControl: false,
-                prefixUrl: "../../build/openseadragon/images/",
-                hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time.
                 tileSources: {
                     type: "image",
                     url: "../data/CCyan.png"