Merge pull request #763 from RSpace/canvas-selector

[BREAKING] Canvas element created inside a-scene element, configurable canvas

Author: dmarcos

src/core/a-scene.js

@@ -402,13 +402,22 @@ var AScene = module.exports = registerElement('a-scene', {
 
     setupCanvas: {
       value: function () {
-        var canvas = this.canvas = document.createElement('canvas');
+        var canvasSelector = this.getAttribute('canvas');
+        var canvas;
+
+        if (canvasSelector) {
+          canvas = this.canvas = document.querySelector(canvasSelector);
+        } else {
+          canvas = this.canvas = document.createElement('canvas');
+          this.appendChild(canvas);
+        }
+
         canvas.classList.add('a-canvas');
         // Prevents overscroll on mobile devices.
         canvas.addEventListener('touchmove', function (evt) {
           evt.preventDefault();
         });
-        document.body.appendChild(canvas);
+
         window.addEventListener('resize', this.resizeCanvas.bind(this), false);
       }
     },

tests/core/a-scene.test.js

@@ -68,13 +68,28 @@ suite('a-scene (without renderer)', function () {
   });
 
   suite('setupCanvas', function () {
-    test('adds canvas', function (done) {
-      assert.notOk(document.querySelector('canvas'));
+    test('adds canvas to a-scene element by default', function (done) {
+      assert.notOk(this.el.querySelector('canvas'));
       this.el.setupCanvas();
       process.nextTick(function () {
-        assert.ok(document.querySelector('canvas'));
+        assert.ok(this.el.querySelector('canvas'));
         done();
-      });
+      }.bind(this));
+    });
+
+    test('reuses existing canvas when selector is given', function (done) {
+      var canvas = document.createElement('canvas');
+      canvas.setAttribute('id', 'canvas');
+      document.body.appendChild(canvas);
+      assert.notOk(canvas.classList.contains('a-canvas'));
+
+      this.el.setAttribute('canvas', '#canvas');
+      this.el.setupCanvas();
+      process.nextTick(function () {
+        assert.ok(canvas.classList.contains('a-canvas'));
+        assert.notOk(this.el.querySelector('canvas'));
+        done();
+      }.bind(this));
     });
   });