Canvas Source Performance Increase

src/source/canvas_source.js

@@ -22,8 +22,7 @@ import type Evented from '../util/evented';
  *        [-76.52, 39.18],
  *        [-76.52, 39.17],
  *        [-76.54, 39.17]
- *    ],
- *    contextType: '2d'
+ *    ]
  * });
  *
  * // update
@@ -41,8 +40,6 @@ class CanvasSource extends ImageSource {
     options: CanvasSourceSpecification;
     animate: boolean;
     canvas: HTMLCanvasElement;
-    context: (CanvasRenderingContext2D | WebGLRenderingContext);
-    secondaryContext: ?CanvasRenderingContext2D;
     width: number;
     height: number;
     canvasData: ?ImageData;
@@ -57,9 +54,6 @@ class CanvasSource extends ImageSource {
 
     load() {
         this.canvas = this.canvas || window.document.getElementById(this.options.canvas);
-        const context = this.canvas.getContext(this.options.contextType);
-        if (!context) return this.fire('error', new Error('Canvas context not found.'));
-        this.context = context;
         this.width = this.canvas.width;
         this.height = this.canvas.height;
         if (this._hasInvalidDimensions()) return this.fire('error', new Error('Canvas dimensions cannot be less than or equal to zero.'));
@@ -103,66 +97,12 @@ class CanvasSource extends ImageSource {
         this.pause();
     }
 
-    /**
-     * Sets the canvas's coordinates and re-renders the map.
-     *
-     * @method setCoordinates
-     * @param {Array<Array<number>>} coordinates Four geographical coordinates,
-     *   represented as arrays of longitude and latitude numbers, which define the corners of the canvas.
-     *   The coordinates start at the top left corner of the canvas and proceed in clockwise order.
-     *   They do not have to represent a rectangle.
-     * @returns {CanvasSource} this
-     */
-    // setCoordinates inherited from ImageSource
-
-    readCanvas(resize: boolean) {
-        // We *should* be able to use a pure HTMLCanvasElement in
-        // texImage2D/texSubImage2D (in ImageSource#_prepareImage), but for
-        // some reason this breaks the map on certain GPUs (see #4262).
-
-        if (this.context instanceof CanvasRenderingContext2D) {
-            this.canvasData = this.context.getImageData(0, 0, this.width, this.height);
-        } else if (this.context instanceof WebGLRenderingContext) {
-            const gl = this.context;
-            const data = new Uint8Array(this.width * this.height * 4);
-            gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
-
-            if (!this.secondaryContext) this.secondaryContext = window.document.createElement('canvas').getContext('2d');
-            if (!this.canvasData || resize) {
-                this.canvasData = this.secondaryContext.createImageData(this.width, this.height);
-            }
-
-            // WebGL reads pixels bottom to top, but for our ImageData object we need top to bottom: flip here
-            for (let i = this.height - 1, j = 0; i >= 0; i--, j++) {
-                this.canvasData.data.set(data.subarray(i * this.width * 4, (i + 1) * this.width * 4), j * this.width * 4);
-            }
-        }
-    }
-
     prepare() {
-        let resize = false;
-        if (this.canvas.width !== this.width) {
-            this.width = this.canvas.width;
-            resize = true;
-        }
-        if (this.canvas.height !== this.height) {
-            this.height = this.canvas.height;
-            resize = true;
-        }
         if (this._hasInvalidDimensions()) return;
 
         if (Object.keys(this.tiles).length === 0) return; // not enough data for current position
 
-        const reread = this.animate || !this.canvasData || resize;
-        if (reread) {
-            this.readCanvas(resize);
-        }
-
-        if (!this.canvasData) {
-            this.fire('error', new Error('Could not read canvas data.'));
-            return;
-        }
-        this._prepareImage(this.map.painter.gl, this.canvasData, resize);
+        this._prepareImage(this.map.painter.gl, this.canvas, true);
     }
 
     serialize(): Object {

test/unit/source/canvas_source.test.js

@@ -18,7 +18,6 @@ function createSource(options) {
     options = util.extend({
         canvas: 'id',
         coordinates: [[0, 0], [1, 0], [1, 1], [0, 1]],
-        contextType: '2d'
     }, options);
 
     const source = new CanvasSource('id', options, { send: function() {} }, options.eventedParent);