diff --git a/js/source/canvas_source.js b/js/source/canvas_source.js
index 9ba7f8e7817..a7d1b914397 100644
--- a/js/source/canvas_source.js
+++ b/js/source/canvas_source.js
@@ -43,13 +43,13 @@ class CanvasSource extends ImageSource {
     constructor(id, options, dispatcher, eventedParent) {
         super(id, options, dispatcher, eventedParent);
         this.options = options;
+        this.animate = options.hasOwnProperty('animate') ? options.animate : true;
+        this.dimensions = options.dimensions;
+        this.resize = false;
     }
 
     load() {
-        const options = this.options;
-        this._canvas = window.document.getElementById(options.canvas);
-        this.animate = options.hasOwnProperty('animate') ? options.animate : true;
-        this.dimensions = options.dimensions;
+        this._canvas = this._canvas || window.document.getElementById(this.options.canvas);
 
         // detect context type
         if (this._canvas.getContext('2d')) {
@@ -104,8 +104,8 @@ class CanvasSource extends ImageSource {
 
     onAdd(map) {
         if (this.map) return;
-        this.load();
         this.map = map;
+        this.load();
         if (this.canvas) {
             if (this.animate) this.play();
             this.setCoordinates(this.coordinates);
diff --git a/js/source/vector_tile_source.js b/js/source/vector_tile_source.js
index 4c5c811f1b0..3bb9f0bd5c5 100644
--- a/js/source/vector_tile_source.js
+++ b/js/source/vector_tile_source.js
@@ -30,9 +30,6 @@ class VectorTileSource extends Evented {
         this.setEventedParent(eventedParent);
     }
 
-        this.setEventedParent(eventedParent);
-    }
-
     load() {
         this.fire('dataloading', {dataType: 'source'});
 
diff --git a/package.json b/package.json
index d9b45c12d40..75a89c176a7 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "babel-eslint": "^7.0.0",
     "benchmark": "~2.1.0",
     "browserify": "^13.0.0",
+    "canvas": "^1.6.2",
     "clipboard": "^1.5.12",
     "concat-stream": "1.5.2",
     "coveralls": "^2.11.8",
diff --git a/test/js/source/canvas_source.test.js b/test/js/source/canvas_source.test.js
new file mode 100644
index 00000000000..bdf62f10bdb
--- /dev/null
+++ b/test/js/source/canvas_source.test.js
@@ -0,0 +1,112 @@
+'use strict';
+
+const test = require('mapbox-gl-js-test').test;
+const CanvasSource = require('../../../js/source/canvas_source');
+const Transform = require('../../../js/geo/transform');
+const Evented = require('../../../js/util/evented');
+const util = require('../../../js/util/util');
+const Canvas = require('canvas');
+
+function createSource(options) {
+    const c = new Canvas(20, 20);
+
+    options = util.extend({
+        canvas: 'id',
+        coordinates: [[0, 0], [1, 0], [1, 1], [0, 1]],
+        dimensions: [0, 0, 20, 20]
+    }, options);
+
+    const source = new CanvasSource('id', options, { send: function() {} }, options.eventedParent);
+
+    source._canvas = c;
+
+    return source;
+}
+
+class StubMap extends Evented {
+    constructor() {
+        super();
+        this.transform = new Transform();
+        this.style = { animationLoop: { set: function() {} } };
+    }
+
+    _rerender() {
+        this.fire('rerender');
+    }
+}
+
+test('CanvasSource', (t) => {
+    t.test('constructor', (t) => {
+        const source = createSource();
+
+        source.on('source.load', () => {
+            t.equal(source.minzoom, 0);
+            t.equal(source.maxzoom, 22);
+            t.equal(source.tileSize, 512);
+            t.equal(source.contextType, '2d');
+            t.equal(source.animate, true);
+            t.equal(typeof source.play, 'function');
+            t.end();
+        });
+
+        source.onAdd(new StubMap());
+    });
+
+    t.test('rerenders if animated', (t) => {
+        const source = createSource();
+        const map = new StubMap();
+
+        map.on('rerender', () => {
+            t.ok(true, 'fires rerender event');
+            t.end();
+        });
+
+        source.onAdd(map);
+    });
+
+    t.test('can be static', (t) => {
+        const source = createSource({
+            animate: false
+        });
+        const map = new StubMap();
+
+        map.on('rerender', () => {
+            t.notOk(true, 'shouldn\'t rerender here');
+            t.end();
+        });
+
+        source.on('source.load', () => {
+            t.ok(true, 'fires load event without rerendering');
+            t.end();
+        });
+
+        source.onAdd(map);
+    });
+
+    t.end();
+});
+
+test('CanvasSource#serialize', (t) => {
+    const source = createSource();
+
+    const serialized = source.serialize();
+    t.equal(serialized.type, 'canvas');
+    t.ok(serialized.canvas);
+    t.deepEqual(serialized.coordinates, [[0, 0], [1, 0], [1, 1], [0, 1]]);
+
+    t.end();
+});
+
+test('CanvasSource#setDimensions', (t) => {
+    const source = createSource();
+
+    t.equal(source.resize, false);
+    t.deepEqual(source.dimensions, [0, 0, 20, 20]);
+
+    source.setDimensions([0, 0, 30, 30]);
+
+    t.equal(source.resize, true);
+    t.deepEqual(source.dimensions, [0, 0, 30, 30]);
+
+    t.end();
+});