Dynamically read width/height of canvas in <ion-content>


I do have an easy IONIC4 Setup with a Header and Splitpane-Menu like:

    <ion-menu side="end" type="overlay">
          <ion-title>My Menu</ion-title>
          <ion-menu-toggle auto-hide="false">
                <ion-icon slot="start" name="thumbs-up"></ion-icon>
                <ion-label>Info 1</ion-label>
              <ion-checkbox slot="start" [(ngModel)]="visualizeCheckbox" (ionChange)="updateCheckbox()"></ion-checkbox>
              <ion-label>My Checkbox</ion-label>
                <ion-range min="1" max="10" step="1" snaps="true" pin="true" [(ngModel)]="sliderPosition" (ionChange)="updateSliderPosition()">
                  <ion-icon slot="start" size="small" name="flask"></ion-icon>
                  <ion-icon slot="end" name="flask"></ion-icon>
    <ion-router-outlet main></ion-router-outlet>

I do have one simple page like this:

    <ion-label>Hello user <b>{{userName}}</b>!</ion-label> 
    <ion-buttons slot="end">

<ion-content [scrollY]="false">
  <canvas #renderCanvas ion-fixed></canvas>

Inside this page i load a BabylonJS engine into the View-Child #rendercanvas as shown in the following snippet of home.page.ts

export class HomePage implements OnInit, OnDestroy {
  @ViewChild('renderCanvas', { static: true }) renderCanvas: ElementRef;
ngOnInit() {
    this.renderCanvas.nativeElement.height = window.innerHeight;
    this.renderCanvas.nativeElement.width = window.innerWidth;
    this.renderCanvas.nativeElement.style.width = '100%';
    this.renderCanvas.nativeElement.style.height = '100%';

    window.addEventListener('resize', () => {

In doing so i need to set the height and width of the renderCanvas correctly. I did it like shown above with using the window.innerWidth and window.innerHeight. But my issue is that, this includes the header and the split-pane-menu. The Event-Listener ensures a correct resizing once the window is resized. But, the first initial view of the BabylonJS engine in the renderCanvas will be distorted.

How can i dynamically access the width and height of just the renderCanvas (without the header and the menu)?
It tried it with using this.renderCanvas.nativeElement.clientHeight the but always received a 0.

Does anyone has an idea?

Thanks for your help!

PS: Here is an excerpt of my package.json in case that is important

"dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@auth0/angular-jwt": "^3.0.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "babylonjs": "^4.0.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"