Problems to draw in ionic

in the html file

<canvas #canvas id="canvas"></canvas>
<button (click)="draw()" ion-button block icon-right>Donate <ion-icon name="heart"></ion-icon></button>

in the ts file

import { Component , ViewChild , ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

    @ViewChild('canvas') canvas: ElementRef; 

    ctx: CanvasRenderingContext2D;

  constructor(public navCtrl: NavController) {}

      this.canvas.nativeElement.setAttribute("width", window.innerWidth.toString());
      this.canvas.nativeElement.setAttribute("height", window.innerWidth.toString());
      this.ctx = this.canvas.nativeElement.getContext("2d");

         console.log(this.ctx); //this line displays : "undefined"
         this.ctx.fillStyle = "#C00";
         this.ctx.fillRect(0, 0, 500, 500);


ctx is undefined - I don’t know why ??

when calling this method draw()

it displays “undefined” then error -> cannot set property ‘fillStyle’ of undefined


There is no such hook called - ngViewAfterInit()

The correct lifecycle hook is - ngAfterViewInit()

@frodoe7 u have any solution for how to undo on canvas …am drawing on image which is placed on canvas…so how to undo drawing on canvas Thanks in advance