update one more frame after canvas source paused (#8130) (#8163)

* update one more frame after canvas source paused

Calling `canvasSource.pause()` lets us know we can stop pulling in
updates from it. Since it is possible that changes were made to the
canvas source since the last render we should pull in one more update
before stopping. This also lets you call play and pause immediately to
render just one frame:

ctx.fillRect(10, 10, 50, 50);
canvasSource.play();
canvasSource.pause();

* add test

* don't render changes made after canvasSource.pause()

* optimize

* optimize

src/source/canvas_source.js

@@ -130,7 +130,10 @@ class CanvasSource extends ImageSource {
         };
 
         this.pause = function() {
-            this._playing = false;
+            if (this._playing) {
+                this.prepare();
+                this._playing = false;
+            }
         };
 
         this._finishLoading();

test/integration/render-tests/canvas/update/style.json

@@ -0,0 +1,57 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "addFakeCanvas": {
+          "id": "fake-canvas",
+          "image": "./image/0.png"
+      },
+      "operations": [
+          ["wait"],
+          ["updateFakeCanvas", "canvas", "./image/1.png", "./image/0.png"]
+      ]
+    }
+  },
+  "center": [
+    -122.514426,
+    37.562984
+  ],
+  "zoom": 14,
+  "sources": {
+    "canvas": {
+      "type": "canvas",
+      "animate": false,
+      "coordinates": [
+        [
+          -122.51596391201019,
+          37.56238816766053
+        ],
+        [
+          -122.51467645168304,
+          37.56410183312965
+        ],
+        [
+          -122.51309394836426,
+          37.563391708549425
+        ],
+        [
+          -122.51423120498657,
+          37.56161849366671
+        ]
+      ],
+      "canvas": "fake-canvas"
+    }
+  },
+  "layers": [
+    {
+      "id": "canvas",
+      "type": "raster",
+      "source": "canvas",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}

test/suite_implementation.js

@@ -157,6 +157,16 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im
             map.addLayer(new customLayerImplementations[operation[1]](), operation[2]);
             map._render();
             applyOperations(map, operations.slice(1), callback);
+        } else if (operation[0] === 'updateFakeCanvas') {
+            const canvasSource = map.getSource(operation[1]);
+            canvasSource.play();
+            // update before pause should be rendered
+            updateFakeCanvas(window.document, options.addFakeCanvas.id, operation[2]);
+            canvasSource.pause();
+            // update after pause should not be rendered
+            updateFakeCanvas(window.document, options.addFakeCanvas.id, operation[3]);
+            map._render();
+            applyOperations(map, operations.slice(1), callback);
         } else if (operation[0] === 'setStyle') {
             // Disable local ideograph generation (enabled by default) for
             // consistent local ideograph rendering using fixtures in all runs of the test suite.
@@ -178,3 +188,9 @@ function createFakeCanvas(document, id, imagePath) {
     fakeCanvas.height = image.height;
     return fakeCanvas;
 }
+
+function updateFakeCanvas(document, id, imagePath) {
+    const fakeCanvas = document.getElementById(id);
+    const image = PNG.sync.read(fs.readFileSync(path.join(__dirname, './integration', imagePath)));
+    fakeCanvas.data = image.data;
+}