added canvas as option to the viewer

build/ros3d.cjs.js

@@ -58677,8 +58677,9 @@ var Viewer = function Viewer(options) {
   options = options || {};
   var divID = options.divID;
   var elem = options.elem;
-  var width = options.width;
-  var height = options.height;
+  var canvas = options.canvas;
+  var width = options.width || options.canvas && options.canvas.width;
+  var height = options.height || options.canvas && options.canvas.height;
   var background = options.background || '#111111';
   var antialias = options.antialias;
   var intensity = options.intensity || 0.66;
@@ -58695,10 +58696,17 @@ var Viewer = function Viewer(options) {
   var lineTypePanAndZoomFrame = options.lineTypePanAndZoomFrame || 'full';
 
   // create the canvas to render to
-  this.renderer = new THREE.WebGLRenderer({
-    antialias : antialias,
-    alpha: true
-  });
+  this.renderer = canvas ? 
+    new THREE.WebGLRenderer({
+      antialias : antialias,
+      alpha: true,
+      canvas: canvas
+    }) 
+    : 
+    new THREE.WebGLRenderer({
+      antialias : antialias,
+      alpha: true,
+    });
   this.renderer.setClearColor(parseInt(background.replace('#', '0x'), 16), alpha);
   this.renderer.sortObjects = false;
   this.renderer.setSize(width, height);
@@ -58745,9 +58753,11 @@ var Viewer = function Viewer(options) {
   this.stopped = true;
   this.animationRequestId = undefined;
 
-  // add the renderer to the page
-  var node = elem || document.getElementById(divID);
-  node.appendChild(this.renderer.domElement);
+  // add the renderer to the page if canvas is not passed into the option
+  if( !canvas ) {
+    var node = elem || document.getElementById(divID);
+    node.appendChild(this.renderer.domElement);
+  }
 
   // begin the render loop
   this.start();

build/ros3d.esm.js

@@ -58653,8 +58653,9 @@ var Viewer = function Viewer(options) {
   options = options || {};
   var divID = options.divID;
   var elem = options.elem;
-  var width = options.width;
-  var height = options.height;
+  var canvas = options.canvas;
+  var width = options.width || options.canvas && options.canvas.width;
+  var height = options.height || options.canvas && options.canvas.height;
   var background = options.background || '#111111';
   var antialias = options.antialias;
   var intensity = options.intensity || 0.66;
@@ -58671,10 +58672,17 @@ var Viewer = function Viewer(options) {
   var lineTypePanAndZoomFrame = options.lineTypePanAndZoomFrame || 'full';
 
   // create the canvas to render to
-  this.renderer = new THREE.WebGLRenderer({
-    antialias : antialias,
-    alpha: true
-  });
+  this.renderer = canvas ? 
+    new THREE.WebGLRenderer({
+      antialias : antialias,
+      alpha: true,
+      canvas: canvas
+    }) 
+    : 
+    new THREE.WebGLRenderer({
+      antialias : antialias,
+      alpha: true,
+    });
   this.renderer.setClearColor(parseInt(background.replace('#', '0x'), 16), alpha);
   this.renderer.sortObjects = false;
   this.renderer.setSize(width, height);
@@ -58721,9 +58729,11 @@ var Viewer = function Viewer(options) {
   this.stopped = true;
   this.animationRequestId = undefined;
 
-  // add the renderer to the page
-  var node = elem || document.getElementById(divID);
-  node.appendChild(this.renderer.domElement);
+  // add the renderer to the page if canvas is not passed into the option
+  if( !canvas ) {
+    var node = elem || document.getElementById(divID);
+    node.appendChild(this.renderer.domElement);
+  }
 
   // begin the render loop
   this.start();

build/ros3d.js

@@ -59203,6 +59203,7 @@ var ROS3D = (function (exports, ROSLIB) {
 	   *
 	   *  * divID - the ID of the div to place the viewer in
 	   *  * elem - the elem to place the viewer in (overrides divID if provided)
+	   *  * canvas (optional) - the canvas to render the viewer (overrides divID and elem if provided)
 	   *  * width - the initial width, in pixels, of the canvas
 	   *  * height - the initial height, in pixels, of the canvas
 	   *  * background (optional) - the color to render the background, like '#efefef'
@@ -59216,12 +59217,13 @@ var ROS3D = (function (exports, ROSLIB) {
 	   *  *                           panning/zooming. Only has effect when
 	   *  *                           displayPanAndZoomFrame is set to true.
 	   */
-	  constructor(options) {
+	   constructor(options) {
 	    options = options || {};
 	    var divID = options.divID;
 	    var elem = options.elem;
-	    var width = options.width;
-	    var height = options.height;
+	    var canvas = options.canvas;
+	    var width = options.width || options.canvas && options.canvas.width;
+	    var height = options.height || options.canvas && options.canvas.height;
 	    var background = options.background || '#111111';
 	    var antialias = options.antialias;
 	    var intensity = options.intensity || 0.66;
@@ -59238,10 +59240,17 @@ var ROS3D = (function (exports, ROSLIB) {
 	    var lineTypePanAndZoomFrame = options.lineTypePanAndZoomFrame || 'full';
 
 	    // create the canvas to render to
-	    this.renderer = new THREE.WebGLRenderer({
-	      antialias : antialias,
-	      alpha: true
-	    });
+	    this.renderer = canvas ? 
+	      new THREE.WebGLRenderer({
+	        antialias : antialias,
+	        alpha: true,
+	        canvas: canvas
+	      }) 
+	      : 
+	      new THREE.WebGLRenderer({
+	        antialias : antialias,
+	        alpha: true,
+	      });
 	    this.renderer.setClearColor(parseInt(background.replace('#', '0x'), 16), alpha);
 	    this.renderer.sortObjects = false;
 	    this.renderer.setSize(width, height);
@@ -59288,9 +59297,11 @@ var ROS3D = (function (exports, ROSLIB) {
 	    this.stopped = true;
 	    this.animationRequestId = undefined;
 
-	    // add the renderer to the page
-	    var node = elem || document.getElementById(divID);
-	    node.appendChild(this.renderer.domElement);
+	    // add the renderer to the page if canvas is not passed into the option
+	    if( !canvas ) {
+	      var node = elem || document.getElementById(divID);
+	      node.appendChild(this.renderer.domElement);
+	    }
 
 	    // begin the render loop
 	    this.start();

src/visualization/Viewer.js

@@ -13,6 +13,7 @@
  *
  *  * divID - the ID of the div to place the viewer in
  *  * elem - the elem to place the viewer in (overrides divID if provided)
+ *  * canvas (optional) - the canvas to render the viewer (overrides divID and elem if provided)
  *  * width - the initial width, in pixels, of the canvas
  *  * height - the initial height, in pixels, of the canvas
  *  * background (optional) - the color to render the background, like '#efefef'
@@ -30,6 +31,7 @@ ROS3D.Viewer = function(options) {
   options = options || {};
   var divID = options.divID;
   var elem = options.elem;
+  var canvas = options.canvas;
   var width = options.width;
   var height = options.height;
   var background = options.background || '#111111';
@@ -50,7 +52,8 @@ ROS3D.Viewer = function(options) {
   // create the canvas to render to
   this.renderer = new THREE.WebGLRenderer({
     antialias : antialias,
-    alpha: true
+    alpha: true,
+    canvas: canvas
   });
   this.renderer.setClearColor(parseInt(background.replace('#', '0x'), 16), alpha);
   this.renderer.sortObjects = false;
@@ -98,9 +101,11 @@ ROS3D.Viewer = function(options) {
   this.stopped = true;
   this.animationRequestId = undefined;
 
-  // add the renderer to the page
-  var node = elem || document.getElementById(divID);
-  node.appendChild(this.renderer.domElement);
+  // add the renderer to the page if canvas is not passed into the options
+  if( canvas === undefined ) {
+    var node = elem || document.getElementById(divID);
+    node.appendChild(this.renderer.domElement);
+  }
 
   // begin the render loop
   this.start();

tests/tests.js

@@ -4,7 +4,6 @@ var assert = chai.assert;
 
 describe('Initialization', function() {
 
-
   describe('Arrow', function() {
     var arrow = new ROS3D.Arrow();
 
@@ -64,4 +63,24 @@ describe('Initialization', function() {
 
   });
 
+  describe('Viewer', function() {
+    const WIDTH = 500;
+    const HEIGHT = 300;
+    const canvas = document.createElement('canvas');
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+    const viewer = new ROS3D.Viewer({
+      canvas: canvas,
+      height: HEIGHT,
+      width: WIDTH
+    });
+
+    it('initializes correctly with canvas passed in as argument', () => {
+      assert.isTrue(viewer.renderer.domElement === canvas);
+      assert.isTrue(viewer.renderer.getSize().width === WIDTH);
+      assert.isTrue(viewer.renderer.getSize().height === HEIGHT);
+    });
+
+  });
+
 });