# Angular | Setting up a custom canvas

**URL:** <https://discourse.threejs.org/t/angular-setting-up-a-custom-canvas/12405>\
**Category:** Questions\
**Tags:** angular\
**Created:** [January 29, 2020, 11:28am UTC](https://discourse.threejs.org/t/angular-setting-up-a-custom-canvas/12405 "2020-01-29T11:28:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![William\_Fargues](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/william_fargues/32/8961_2.png) [@William\_Fargues](https://discourse.threejs.org/u/William_Fargues)\
**Post date:** [January 29, 2020, 11:28am UTC](https://discourse.threejs.org/t/angular-setting-up-a-custom-canvas/12405/1 "2020-01-29T11:28:38Z")

</div>

Hello,

First thing first, I’m very new to ThreeJS.

I’m following the tutorial of [this guy](https://www.youtube.com/watch?v=6oFvqLfRnsU) to understand the basics.

The problem is that he uses _“document.body.appendChild(this.renderer.domElement)”_ and that creates a canvas I can’t modify with the CSS of my component.  
So what I’m trying to do is to create my own canvas in the HTML of my component and then use this canvas as the main canvas.

But I’m struggling to do it, so any help would be very nice 😊

**Component.html :**

```
<canvas #myCanvas id="myCanvas"></canvas>

```

**Component.css :**

```
#myCanvas { 
  width: 100vw; 
  height: 100vh; 
  display: block; 
}

```

**Component.ts :**

```
 export class Scene3dComponent implements OnInit {

   scene = new THREE.Scene()

   camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

   @ViewChild('myCanvas', { static: true })
   public myCanvas: ElementRef<HTMLCanvasElement>;
   canvas = this.myCanvas.nativeElement

   renderer = new THREE.WebGLRenderer({canvas: this.canvas, antialias: true})

   constructor() { }

   ngAfterViewInit(){
     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', () => {
       this.renderer.setSize(window.innerWidth, window.innerHeight)
       this.camera.aspect = window.innerWidth / innerHeight
       this.camera.updateProjectionMatrix();
     })
   }
}

```

The error I’m getting is _“TypeError: Cannot read property ‘nativeElement’ of undefined”_

---

<div class="post-metadata">

**Author:** ![Daggle24](https://avatars.discourse-cdn.com/v4/letter/d/a5b964/32.png) [@Daggle24](https://discourse.threejs.org/u/Daggle24)\
**Post date:** [August 10, 2020, 9:14am UTC](https://discourse.threejs.org/t/angular-setting-up-a-custom-canvas/12405/2 "2020-08-10T09:14:13Z")

</div>

for all people with this issue, I solved it by setting appendChild on the afterViewInit hook of angular and using the Renderer2 angular service on the constructor.

`constructor(private ngRenderer:Renderer2){ }`  
` ngAfterViewInit(){ this.ngRenderer.appendChild(this.myRenderer.nativeElement,this.renderer.domElement) }`