CODEWITHSUNDEEP
angulartypescriptcanvassignatureangular8
DavidZam
DavidZam

Reputation: 131

Trouble creating a canvas to draw signature on Angular 8

I'm trying to create a component to sign with HTML 5 and canvas in Angular 8, I need the component to recognize touch events as well as mouse events.

I've been taking inspiration from this page to create the component, since it's something very similar to what I need:

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

But I haven't been able to make the component work, I don't know why, I think the error may be due to the fact that I do not have the same configuration of the tsconfig.json file as the tutorial.

This is the configuration of the tsconfig.json file from the tutorial

Conf

And this is mine:

Conf

So I've come to a point where I don't know how to move forward, please if anyone knows exactly what I'm doing wrong or if there's a simpler way to create the component for the signature that recognizes touch events I'd be very grateful if you would tell me.

EDIT: I share a stackblitz with the code:

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

EDIT: The code works on Stackblitz but not in my project, this could be because of the tsconfig.json file configuration?

Upvotes: 3

Views: 1781

Answers (1)

DavidZam
DavidZam

Reputation: 131

Finally and if it helps someone, the code was fine, it didn't "work" in my project because I wasn't taking the X and Y coordinates properly, so I had to manage to get it, using this code:

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;
}

Upvotes: 2

Related Questions