title: Angular ThreeJS | How do I correctly create a custom canvas
body: <p>I'm trying to setup correctly a very basic example with ThreeJS and Angular 8.</p>
  
  <p>When I try to modify the size of my canvas to remove the scrollbars I get the error <em>"Cannot read property 'width' of null"</em>.</p>
  
  <p>This is because of the canvas but i don't know why.</p>
  
  <p><strong>Component.html :</strong></p>
  
  <pre><code>&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>Component.css :</strong></p>
  
  <pre><code>body { 
      margin: 0; 
  }
  
  canvas { 
      width: 100vw; 
      height: 100vh; 
      display: block; 
  }
  </code></pre>
  
  <p><strong>Component.ts :</strong> </p>
  
  <pre><code>export class Scene3dComponent implements OnInit {
  
    scene = new THREE.Scene()
  
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  
    canvas = document.querySelector("canvas")
    renderer = new THREE.WebGLRenderer({antialias: true, canvas: this.canvas})
  
    constructor() { }
  
    ngOnInit() {
      this.startScene();
    }
  
    startScene() {
      this.renderer.setClearColor('#E5E5E5')
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.render(this.scene, this.camera)
  
      document.body.appendChild(this.renderer.domElement)
  
      window.addEventListener('resize', () =&gt; {
        this.renderer.setSize(window.innerWidth, window.innerHeight)
        this.camera.aspect = window.innerWidth / innerHeight
        this.camera.updateProjectionMatrix();
      })
    }
  }
  </code></pre>
  
  <p>I'm pretty sure I'm not understanding something, but I don't know what.</p>