Проблема создания холста для рисования подписи на Angular 8

Question

Я пытаюсь создать компонент для подписи с помощью HTML 5 и canvas в Angular 8, мне нужен компонент для распознавания событий касания, а также событий мыши.

Я черпал вдохновение из этогостраница для создания компонента, так как это что-то очень похожее на то, что мне нужно:

https://kernhanda.github.io/tutorial-typescript-canvas-drawing/

Но я не смог заставить компонент работать, я не знаю почему, Я думаю, что ошибка может быть связана с тем, что у меня не такая же конфигурация файла tsconfig.json, как в учебнике.

Это конфигурация файла tsconfig.json из учебника

И это мое:

Итак, я пришел к тому, что не знаю, как двигатьсявперед, пожалуйста, если кто-нибудь точно знает, что я делаю неправильно или есть более простой способ создать компонент для подписи, который распознает сенсорные события, я был бы очень признателен, если бы вы сказали мне.

РЕДАКТИРОВАТЬ : я делю стекаблитц с кодом:

https://stackblitz.com/edit/angular-szrn6z

EDIT : код работает на Stackblitz, но не в моем проекте, это может быть связано с конфигурацией файла tsconfig.json?

Answer 1

Наконец, и если это кому-то поможет, код был в порядке, он не "работал" в моем проекте, потому что я не брал координаты X и Y должным образом, поэтому мне пришлось успеть получить его, используя этот код:

let r = this.canvasEl.getBoundingClientRect();
let mouseX;
if((e as TouchEvent).changedTouches) {
     mouseX = (e as TouchEvent).changedTouches[0].pageX - r.left;
} else {
     mouseX = (e as MouseEvent).layerX;
}

let mouseY;
if((e as TouchEvent).changedTouches) {
     mouseY = (e as TouchEvent).changedTouches[0].pageY - r.top;
} else {
     mouseY = (e as MouseEvent).layerY;
}