title: How to switch between a WebGL renderer and a canvas renderer in three.js
body: <p>I want to render a scene using a WebGL renderer or a canvas renderer in three.js (version 69).</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src="./libs/three.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/CanvasRenderer.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/Projector.js"&gt;&lt;/script&gt;
  
      &lt;script src="./libs/dat.gui.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="renderer-output"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          // global variables
          var scene, camera, renderer;
  
          var gui;
  
          var config = {
              rendererType: 'WebGL',
              perspectiveCameraFOV: 45,
              perspectiveCameraNear: 0.1,
              perspectiveCameraFar: 1000,
              cameraPosition_x: -30,
              cameraPosition_y: 40,
              cameraPosition_z: 30,
          };
  
          function init() {
              // create the scene
              scene = new THREE.Scene();
  
              // create the camera
              camera = new THREE.PerspectiveCamera(
                  config.perspectiveCameraFOV,
                  window.innerWidth / window.innerHeight,
                  config.perspectiveCameraNear,
                  config.perspectiveCameraFar
              );
              // set the position
              camera.position.set(
                  config.cameraPosition_x,
                  config.cameraPosition_y,
                  config.cameraPosition_z
              );
              // set the look at
              camera.lookAt(scene.position);
  
              // create the renderer
              if (config.rendererType == 'WebGL') {
                  renderer = new THREE.WebGLRenderer();
              } else if (config.rendererType == 'canvas') {
                  renderer = new THREE.CanvasRenderer();
              }
              // set the size
              renderer.setSize(window.innerWidth, window.innerHeight);
              // add the output to the html element
              document.getElementById("renderer-output").appendChild(renderer.domElement);
  
              var boxGeometry = new THREE.BoxGeometry(4, 4, 4);
              var boxMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  
              var box = new THREE.Mesh(boxGeometry, boxMaterial);
  
              scene.add(box);
  
              // create the dat gui
              gui = new dat.GUI({
                  preset: config // preset default config
              });
  
              // remember config
              gui.remember(config);
  
              // add a renderer folder
              let rendererFolder = gui.addFolder("Renderer");
              rendererFolder.open();
  
              // set control rendererType
              let rendererTypeController = rendererFolder.add(
                  config,
                  "rendererType",
                  ['WebGL', 'canvas']
              );
              rendererTypeController.onFinishChange(function (rendererType) {
                  // remove the renderer output from the html element
                  document.getElementById('renderer-output').removeChild(renderer.domElement);
                  // create the renderer
                  if (rendererType == 'WebGL') {
                      renderer = new THREE.WebGLRenderer();
                  } else {
                      renderer = new THREE.CanvasRenderer();
                  }
                  // set the size
                  renderer.setSize(window.innerWidth, innerHeight);
                  // add the output to the html element
                  document.getElementById('renderer-output').appendChild(renderer.domElement);
              });
  
              render();
          }
  
          function render() {
              // update the scene
              requestAnimationFrame(render);
              renderer.render(scene, camera);
          }
  
          window.onload = init;
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I want to change the renderer type, the following lines are executed:</p>
  
  <pre><code>// remove the renderer output from the html element
  document.getElementById('renderer-output').removeChild(renderer.domElement);
  // create the renderer
  if (rendererType == 'WebGL') {
      renderer = new THREE.WebGLRenderer();
  } else {
      renderer = new THREE.CanvasRenderer();
  }
  // set the size
  renderer.setSize(window.innerWidth, innerHeight);
  // add the output to the html element
  document.getElementById('renderer-output').appendChild(renderer.domElement);
  </code></pre>
  
  <p>But when I change the renderer from canvas to WebGL I can't see the objects in the scene. When I go from WebGL to canvas I can see it.</p>
  
  <p>I don't get any error in console.</p>
  
  <p>Do you have any advice ?</p>