Angular中创建可响应式绘图Canvas遇问题求助

我正在开发一款基于Angular的小型网页游戏，要添加用户通过HTML Canvas元素绘制个人头像的功能。此前没接触过Canvas，靠网上示例快速实现了基础绘图功能。现在想让Canvas具备响应式以适配各类设备，尝试了两种方案：

• 直接为Canvas添加样式：width: 100%; height: 100%
• 在ngAfterViewInit()中设置尺寸：

canvasEl.style.width = "100%";
canvasEl.style.height = "100%";
canvasEl.width = canvasEl.offsetWidth;
canvasEl.height = canvasEl.offsetHeight;

两种方案都能放大Canvas，但绘图功能出现异常：要么Canvas无变化，要么线条位置和光标不符。查资料得知需要设置Canvas自身的宽高属性，于是尝试在ngAfterViewInit()中获取父容器宽高，结果打印出的值始终为0。

相关代码如下：
TypeScript代码：

@ViewChild('parent') parent: ElementRef;

ngAfterViewInit() { 
   ...
   console.log (this.parent.nativeElement.offsetHeight); 
   ...
}

HTML代码：

<div #parent fxFlex>
  <canvas id="responsive-canvas" #myCanvas></canvas>
</div>

内容的提问来源于stack exchange，提问作者Schmank