Angular холст не обновляется при изменении размера

Question

У меня есть Angular Canvas, размер которого я хочу изменить в зависимости от размера окна. Я сделал это так внутри моего компонента:

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.canvaHeight = window.innerHeight * 0.91;
    this.canvaWidth = window.innerWidth  * 0.75;
}

И в моем html:

<canvas id="canvas" #canvas width="{{ canvaWidth }}" height="{{ canvaHeight }}" (mousedown)="select($event)" (mousemove)="move($event)" (mouseup)="drop()"></canvas>

Когда я изменяю размер моего окна, размер холста корректно меняется, но все на нем исчезает. Когда я выполняю действие, которое вызывает мою функцию обновления, оно появляется снова. Но если я вызываю его в функции onResize, он не появляется снова, и я не знаю почему.

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.canvaHeight = window.innerHeight * 0.91;
    this.canvaWidth = window.innerWidth  * 0.75;
    this.update();
}

Есть идеи? Должен ли я как-то обновить sh DOM? Как это сделать тогда?

Редактировать: Если я перемещаю объект, он действительно перемещается, даже если он еще не появился.

Я также попробовал с Обещанием и некоторыми способами обновить sh DOM, как ApplicationRef.tick () и ChangeDetectorRef.detectChanges (), но это не работает

Answer 1

Благодаря Blindman67 я нашел способ заставить его работать:

@HostListener('window:resize')
onResize() {
    this.canvaHeight = Math.floor(window.innerHeight * 0.91);
    this.canvaWidth = Math.floor(window.innerWidth  * 0.75);
    this.canvas.nativeElement.height = this.canvaHeight;
    this.canvas.nativeElement.width = this.canvaWidth;
    this.update();
}

(мне все еще нужно хранить значения для других вещей)

(Math.floor должен исправить предупреждение из браузера)