diff --git a/src/source/canvas_source.js b/src/source/canvas_source.js
index e73ae5374d0..8522285cd1c 100644
--- a/src/source/canvas_source.js
+++ b/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.'));
@@ -115,30 +109,6 @@ class CanvasSource extends ImageSource {
      */
     // 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) {
@@ -149,20 +119,12 @@ class CanvasSource extends ImageSource {
             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, resize);
     }
 
     serialize(): Object {
diff --git a/src/source/image_source.js b/src/source/image_source.js
index e2250b0c9ec..a7c9e8a41fd 100644
--- a/src/source/image_source.js
+++ b/src/source/image_source.js
@@ -204,7 +204,7 @@ class ImageSource extends Evented implements Source {
             this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
         } else if (resize) {
             this.texture.update(image);
-        } else if (image instanceof window.HTMLVideoElement || image instanceof window.ImageData) {
+        } else if (image instanceof window.HTMLVideoElement || image instanceof window.ImageData || image instanceof window.HTMLCanvasElement) {
             this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
             gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
         }
diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json
index 6510dacca8a..9d0912233c1 100644
--- a/src/style-spec/reference/v8.json
+++ b/src/style-spec/reference/v8.json
@@ -302,25 +302,6 @@
       "type": "string",
       "required": true,
       "doc": "HTML ID of the canvas from which to read pixels."
-    },
-    "contextType": {
-      "required": true,
-      "type": "enum",
-      "values": {
-        "2d": {
-          "doc" : "Source canvas is associated with a `2d` drawing context."
-        },
-        "webgl": {
-          "doc": "Source canvas is associated with a `webgl` drawing context."
-        },
-        "experimental-webgl": {
-          "doc": "Source canvas is associated with an `experimental-webgl` drawing context."
-        },
-        "webgl2": {
-          "doc": "Source canvas is associated with a `webgl2` drawing context."
-        }
-      },
-      "doc": "The context identifier defining the drawing context associated to the source canvas (see HTMLCanvasElement.getContext() documentation)."
     }
   },
   "layer": {
diff --git a/test/unit/source/canvas_source.test.js b/test/unit/source/canvas_source.test.js
index 30d5569a01b..1a89e26e4f0 100644
--- a/test/unit/source/canvas_source.test.js
+++ b/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);