Angular(Ionic)で画像にお絵描きする最も簡単な方法はプラグインを使うことです.
https://www.npmjs.com/package/ngx-image-drawing

インストール

npm install --save ngx-image-drawing

使い方

モジュールに追加
import { ImageDrawingModule } from 'ngx-image-drawing'; @NgModule({ imports: [ ImageDrawingModule ], declarations: [] }) export class Tab1PageModule {}
あとはHMTLから呼び出せる
<image-drawing <div class="upload"> <input type="file" accept="image/*" (change)="fileChangeEvent($event)"> <img [src]="imgSrc" alt=""> </div> <image-drawing [src]="imageUrl" outputMimeType="'image/jpeg'" outputQuality="0.8" (save)="save($event)" (cancel)="cancel()"> </image-drawing>
tsファイルはこれ
fileChangeEvent(event: any): void { //fileが選択されていなければリセット if (event.target.files.length === 0) { this.file = null; this.imgSrc = ""; return; } //ファイルの情報をfileとimgSrcに保存 let reader = new FileReader(); this.file = event.target.files[0]; reader.onload = () => { this.imgSrc = reader.result; this.imageUrl = reader.result; //this.cx.drawImage(event.target.files[0], 0, 0, this.width, this.height); console.log(this.imgSrc); } reader.readAsDataURL(this.file); } save(event: any){ console.log(event); const url = window.URL.createObjectURL(event); let title = "Angular_sample_file"; //this.cx.drawImage(event, 0, 0, this.width, this.height); // aタグを作成して無理やりクリック -> ダウンロード機能発火 let a = document.createElement('a'); document.body.appendChild(a); a.setAttribute('style', 'display: none'); a.href = url; a.download = title; a.click(); window.URL.revokeObjectURL(url); }

プラグインを使わない方法

https://medium.com/@tarik.nzl/creating-a-canvas-component-with-free-hand-drawing-with-rxjs-and-angular-61279f577415
https://stackblitz.com/edit/angular-rxjs-canvas?file=src%2Fapp%2Fcanvas.component.ts