title: Fitting canvas in parent div
body: <p>I am trying to make my canvas fit inside a div. </p>
  
  <pre><code>    // Make the Canvas Responsive
  
      window.onload = function(){
        wih = window.innerHeight;
        wiw = window.innerWidth;
      }
      window.onresize = function(){
        wih = window.innerHeight;
        wiw = window.innerWidth;
      }
  
      // Define the min and max Values for the Randomize Function.
      radiusMin = 1;
      radiusMax = 40;
      tubeMin = 1;
      tubeMax = 40;
      radialSegmentsMin = 1;
      radialSegmentsMax = 800;
      tubularSegmentsMin = 1;
      tubularSegmentsMax = 30;
      pMin = 1;
      pMax = 20;
      qMin = 1;
      qMax = 20;
      heightScaleMin = 0;
      heightScaleMax = 5;
  
  
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(
          45, // fov (45 / 60)
          window.innerWidth / window.innerHeight, // wiw / wih,
          0.1,
          1000
      );
  
      // Create a WebGLRenderer
      var webGLRenderer = new THREE.WebGLRenderer();
      webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
      webGLRenderer.setSize(window.innerWidth, window.innerHeight);
      webGLRenderer.shadowMapEnabled = true;
  
      // Append the output of the renderer to the html element
      document.getElementById("WebGL-output").append(webGLRenderer.domElement);
      var step = 0;
      var knot;
  
      // Keep Aspect Ratio on Resize
      window.addEventListener("resize", onWindowResize, false);
      function onWindowResize() {
        camera.aspect = wiw / wih;
        camera.updateProjectionMatrix();
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
      }
  
      // Position and point the camera to the center of the scene
      camera.position.x = -30;
      camera.position.y = -40;
      camera.position.z = 50;
      camera.lookAt(new THREE.Vector3(10, 0, 0));
      var clock = new THREE.Clock();
      var trackballControls = new THREE.TrackballControls(camera, webGLRenderer.domElement);
      trackballControls.rotateSpeed = 4.0;
      trackballControls.zoomSpeed = 1.0;
      trackballControls.panSpeed = 1.0;
      trackballControls.noZoom = false;
      trackballControls.noPan = true;
      trackballControls.staticMoving = false;
      trackballControls.dynamicDampingFactor = 0.3;
  
      // Setup Controls for dat.GUI
      var controls = new function() {
        // Default Values
        this.color = "#7a4d0c";
        this.radius = 22;
        this.tube = 32;
        this.radialSegments = 800;
        this.tubularSegments = 12;
        this.p = 10; // wind p times around its axis of rotational symmetry
        this.q = 14; // wind q times around a circle in the interior of the torus
        this.heightScale = 2;
        this.asParticles = true;
        this.rotate = true;
        this.animate = false; // Animates radialSegments
        this.randomize = false; // Randomize Mesh
  
        this.redraw = function() {
          // Remove the old plane
          if (knot) scene.remove(knot);
          // Create a new one
          var geom = new THREE.TorusKnotGeometry(
              controls.radius,
              controls.tube,
              Math.round(controls.radialSegments),
              Math.round(controls.tubularSegments),
              Math.round(controls.p),
              Math.round(controls.q),
              controls.heightScale,
              controls.color
          );
  
          if (controls.asParticles) {
            knot = createParticleSystem(geom);
          } else {
            knot = createMesh(geom);
          }
          // Add it to the scene.
          scene.add(knot);
        };
      }();
  
      var gui = new dat.GUI({
        resizable : false
      });
      gui.addColor(controls, "color").onChange(controls.redraw);
      gui.add(controls, "radius", radiusMin, radiusMax).onChange(controls.redraw);
      gui.add(controls, "tube", tubeMin, tubeMax).onChange(controls.redraw);
      gui.add(controls, "radialSegments", radialSegmentsMin, radialSegmentsMax).step(1).onChange(controls.redraw);
      gui.add(controls, "tubularSegments", tubularSegmentsMin, tubularSegmentsMax).step(1).onChange(controls.redraw);
      gui.add(controls, "p", pMin, pMax).step(1).onChange(controls.redraw);
      gui.add(controls, "q", qMin, qMax).step(1).onChange(controls.redraw);
      gui.add(controls, "heightScale", heightScaleMin, heightScaleMax).onChange(controls.redraw);
      gui.add(controls, "asParticles").onChange(controls.redraw);
      gui.add(controls, "rotate").onChange(controls.redraw);
      gui.add(controls, "animate").onChange(controls.redraw);
      gui.add(controls, "randomize").onChange(controls.redraw);
  
      gui.close();
      controls.redraw();
  
      render();
  
      // From THREE.js examples
      // Create Sprites for the particleSystem
      function generateSprite() {
        var canvas = document.createElement("canvas");
        canvas.width = 16;
        canvas.height = 16;
  
        var context = canvas.getContext("2d");
        var gradient = context.createRadialGradient(
            canvas.width / 2,
            canvas.height / 2,
            0,
            canvas.width / 2,
            canvas.height / 2,
            canvas.width / 2
        );
        gradient.addColorStop(0.0, controls.color);
        gradient.addColorStop(0.2, controls.color);
        gradient.addColorStop(0.4, controls.color);
        gradient.addColorStop(1.0, "rgba(0,0,0,1)");
  
        context.fillStyle = gradient;
        context.fillRect(0, 0, canvas.width, canvas.height);
  
       var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        return texture;
      }
  
      // Create a particleSystem and use the Sprites
      function createParticleSystem(geom) {
        var material = new THREE.ParticleBasicMaterial({
          color: 0xffffff,
          size: 2,
          transparent: true,
          blending: THREE.AdditiveBlending, // Time to Shine!
          map: generateSprite()
        });
  
        var system = new THREE.ParticleSystem(geom, material);
        system.sortParticles = true;
        return system;
        }
  </code></pre>
  
  <p>Currently, it wants to take over the full width because I edited this with CSS and would only accept an "Important" tag. The div is 50vw in tablets and desktops, but 100vw on mobile. The problem is during mobile the canvas wants to ignore the @media style that tells it to resize to 100vw;;;; If this stupid canvas would just stick to the width of the div, it would work.</p>
  
  <p>I am still a very big beginner in Javascript, so any explaination is extremely welcomed.</p>
  
  <p>The canvas needs to fit within the DIV so when the layout responds to mobile, it will behave properly.</p>