angular7+实现前端生成验证码 canvas画图

html：

<li class="_3001_12_verification_code" id="loginMaskLi">
    <label><input id="loginmask" type="text" placeholder="不区分大小写"> </label>
    <span (click) = "initVerifyCode()">获取验证码 </span>
    <canvas #verifyCode type="text" disabled="disabled" ></canvas>
</li>

TS:

import { Component,  ElementRef,  OnInit, ViewChild } from '@angular/core';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  
  @ViewChild ('verifyCode') verifyCode: ElementRef;
  constructor(private el:ElementRef) { }
  public showAuthCode: string;
  public verifyCodeLine: number = 8;
  pu