Usando Canvas desde Ionic

Cuando desarrollo apps con Ionic siempre utilizo Angular, es el Framework de JavaScript con el que me siento más cómodo por lo que la explicación la daré con esta tecnología. Ionic permite utilizar otros Frameworks de JavaScript como React o VueJS, puedes adaptar fácilmente este ejemplo a ellos.

De entrada necesitamos definir en el fichero html la zona del canvas:

<canvas #myCanvas></canvas>

En su correspondiente modelo de javascript tendremos que hacer lo siguiente:

1. Importar ViewChild y ElementRef: import { ViewChild, ElementRef } from '@angular/core';
2. Justo después de declarar la clase principal dentro de ella crear el enlace con el canvas: @ViewChild('myCanvas') myCanvas: ElementRef;
3. A continuación hay que declarar el contexto para poder acceder más adelante al canvas para dibujar: public context: CanvasRenderingContext2D;
4. Dentro del hook AfterViewInit daremos valor al contexto:
   this.context = (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d');
   var ctx = this.context;
5. Y una vez tenemos el ctx ya podemos ejecutar sobre él los métodos para dibujar en el canvas:ctx.moveTo(0, 0);
   ctx.lineTo(200, 100);
   ctx.stroke();

Explicarlo desde blogspot es un poco complicado, pero una vez lo haces un par de veces es bastante sencillo. Este ejemplo es para Angular en Ionic, por lo que vale para Angular también, lo he probado con Angular 7, supongo que con las versiones anteriores también funcionará.