[GLJS-1054] Fix canvas source not rendering correctly when canvas is being resized smaller (internal-2104)

Author: speps

src/render/texture.ts

@@ -65,8 +65,8 @@ class Texture {
         const {gl} = context;
         const {x, y} = options && options.position ? options.position : {x: 0, y: 0};
 
-        const width = Math.max(x + srcWidth, this.size ? this.size[0] : 0);
-        const height = Math.max(y + srcHeight, this.size ? this.size[1] : 0);
+        const width = x + srcWidth;
+        const height = y + srcHeight;
 
         if (this.size && (this.size[0] !== width || this.size[1] !== height)) {
             gl.bindTexture(gl.TEXTURE_2D, null);

test/integration/image/0-half-size.png

@@ -256,6 +256,8 @@ function updateCanvas(imagePath) {
         const image = new Image();
         image.src = imagePath.replace('./', '');
         image.onload = () => {
+            canvas.width = image.width;
+            canvas.height = image.height;
             resolve(ctx.drawImage(image, 0, 0, image.width, image.height));
         };
 

test/integration/lib/operation-handlers.js

@@ -0,0 +1,68 @@
+{
+    "version": 8,
+    "metadata": {
+      "test": {
+        "width": 512,
+        "height": 512,
+        "addFakeCanvas": {
+            "id": "fake-canvas",
+            "image": "./image/1.png"
+        },
+        "operations": [
+            ["wait"],
+            ["updateFakeCanvas", "canvas", "./image/0-half-size.png", "./image/0-half-size.png"]
+        ]
+      }
+    },
+    "center": [
+      -122,
+      37
+    ],
+    "zoom": 2,
+    "projection": {
+        "name": "globe"
+    },
+    "sources": {
+      "canvas": {
+        "type": "canvas",
+        "animate": false,
+        "coordinates": [
+          [
+            -112,
+            27
+          ],
+          [
+            -132,
+            27
+          ],
+          [
+            -132,
+            47
+          ],
+          [
+            -112,
+            47
+          ]
+        ],
+        "canvas": "fake-canvas"
+      }
+    },
+    "layers": [
+        {
+            "id": "background",
+            "type": "background",
+            "paint": {
+                "background-color": "#ff00ff"
+            }
+        },
+        {
+            "id": "canvas",
+            "type": "raster",
+            "source": "canvas",
+            "paint": {
+                "raster-fade-duration": 0
+            }
+        }
+    ]
+  }
+