premultiply canvas images when updating texture

src/source/canvas_source.js

@@ -198,13 +198,9 @@ class CanvasSource extends ImageSource {
         }
 
         if (!this.texture) {
-            this.texture = new Texture(context, this.canvas, gl.RGBA);
-            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
-        } else if (resize) {
-            this.texture.update(this.canvas);
-        } else if (this._playing) {
-            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
-            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.canvas);
+            this.texture = new Texture(context, this.canvas, gl.RGBA, { premultiply: true });
+        } else if (resize || this._playing) {
+            this.texture.update(this.canvas, { premultiply: true });
         }
 
         for (const w in this.tiles) {

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

@@ -0,0 +1,52 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 512,
+      "height": 512,
+      "addFakeCanvas": {
+          "id": "fake-canvas",
+          "image": "./image/0.png"
+      }
+    }
+  },
+  "center": [
+    -122.514426,
+    37.562984
+  ],
+  "zoom": 17,
+  "sources": {
+    "canvas": {
+      "type": "canvas",
+      "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/integration/render-tests/regressions/mapbox-gl-js#7302/style.json

@@ -0,0 +1,52 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 512,
+      "height": 512,
+      "addFakeCanvas": {
+          "id": "fake-canvas",
+          "image": "./image/rocket.png"
+      }
+    }
+  },
+  "center": [
+    -122.514426,
+    37.562984
+  ],
+  "zoom": 17,
+  "sources": {
+    "canvas": {
+      "type": "canvas",
+      "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

@@ -30,6 +30,11 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im
 
     window.devicePixelRatio = options.pixelRatio;
 
+    if (options.addFakeCanvas) {
+        const fakeCanvas = createFakeCanvas(window.document, options.addFakeCanvas.id, options.addFakeCanvas.image);
+        window.document.body.appendChild(fakeCanvas);
+    }
+
     const container = window.document.createElement('div');
     Object.defineProperty(container, 'clientWidth', {value: options.width});
     Object.defineProperty(container, 'clientHeight', {value: options.height});
@@ -101,6 +106,11 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im
             gl.getExtension('STACKGL_destroy_context').destroy();
             delete map.painter.context.gl;
 
+            if (options.addFakeCanvas) {
+                const fakeCanvas = window.document.getElementById(options.addFakeCanvas.id);
+                fakeCanvas.parentNode.removeChild(fakeCanvas);
+            }
+
             callback(null, data, results.map((feature) => {
                 feature = feature.toJSON();
                 delete feature.layer;
@@ -153,3 +163,13 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im
         }
     }
 };
+
+function createFakeCanvas(document, id, imagePath) {
+    const fakeCanvas = document.createElement('canvas');
+    const image = PNG.sync.read(fs.readFileSync(path.join(__dirname, './integration', imagePath)));
+    fakeCanvas.id = id;
+    fakeCanvas.data = image.data;
+    fakeCanvas.width = image.width;
+    fakeCanvas.height = image.height;
+    return fakeCanvas;
+}