Difficulty in generating a canvas for capturing a signature using Angular 8

Currently, I am in the process of developing a component for signing using HTML 5 and canvas within Angular 8. My goal is for this component to be able to detect both touch events and mouse events.

In my pursuit of creating this component, I have been drawing inspiration from a webpage that closely aligns with what I am aiming to achieve:

Despite my efforts, I have encountered challenges in getting the component to function properly. It seems that the issue could possibly be related to differences in the configuration of the tsconfig.json file between the tutorial and mine.

The tutorial's tsconfig.json configuration looks like this:

While mine appears as follows:

At this juncture, I find myself at a loss on how to proceed. I would greatly appreciate any insights or guidance on where I may have gone wrong, or if there exists a simpler method to develop a signature component that can recognize touch events.

EDIT: I have shared a stackblitz link containing the code:

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

EDIT: The code functions correctly on Stackblitz but not within my project. Could this discrepancy be attributed to the configuration of the tsconfig.json file?

angulartypescriptcanvassignatureangular8

Answer №1

After some troubleshooting, I discovered that the issue with my code was not related to its functionality but rather how I was handling the X and Y coordinates. To resolve this, I implemented the following solution:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on automatically inserting a colon (:) after every pair of characters in Angular

I am looking to automatically insert a colon (:) after every 2 characters in my input field: HTML <input nz-input type="text" appLimitInput="textAndNumbers" name="mac" formControlName="mac" (keydown.space)=&qu ...

javascriptangulartypescript

Experience a unique issue with submitting a template-driven form in the ngx-bootstrap template modal

My template reference modal contains a template-driven form inside it. When the form is submitted, all form values are printed in the URL. http://localhost:4200/admin/users?userName=test&<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

angularngx-bootstrapngx-bootstrap-modalangular-template-form

Modifying column array properties using jsstore

I am working with a jsstore table called tblInvoice const tblInvoice: ITable = { name: "invoice", columns: { // Here "Id" is name of column id: { autoIncrement: true, primaryKey: true, notNull: false }, branchId: { ...

javascriptsqlangulartypescript

A guide to merging two JSON objects into a single array

Contains two different JSON files - one regarding the English Premier League stats for 2015-16 season and the other for 2016-17. Here is a snippet of the data from each file: { "name": "English Premier League 2015/16", "rounds": [ { "name": ...

javascriptangulartypescript

Tips for styling the Button component in the shadcn/ui library for maximum impact

I'm currently working on a project using the shadcn/ui library. How can I properly customize it to meet my specific needs? For example, let's say I require an extra large red rounded Button for a call-to-action button in my project. What would be ...

reactjstypescriptnext.jstailwind-cssshadcnui

The gap between columns in Bootstrap grids

Currently, I am dynamically fetching "boxes" and adding them to the HTML document using ngFor. The number of boxes is unknown in advance. Here is the code I am currently using: <div *ngIf="items && items.length" class="row"&g ...

htmlcssangulartwitter-bootstrap

Obtain the POST request response in Angular 6

Currently, I am utilizing Angular to create a user interface that interacts with a REST API. Within the function below, my process involves adding a new project via a POST request, followed by the addition of a series of aliases inputted by the user in the ...

angulartypescripthttpclient

Angular search results coming back as null

I am currently building a search feature for my app (using Angular 14 + Ionic 6) that searches via API call using the GET method. Struggling with an issue where it keeps returning 'undefined' in the console, and also encountering a problem with a ...

javascriptangulartypescriptionic-framework

Change the content inside a div depending on the value of a button

I am currently exploring how to change the content of a div based on button values, utilizing angular2+. Below is my implementation in HTML and js export class TestComponent implements OnInit { title:string = "provas"; constructor() { } popula ...

javascriptangular

Retrieving a value in the app component from a map using Angular

I have been struggling to display the values of ValueM, ValueR, and product in my app.component.html file. Can anyone offer a solution or tip to help me move forward? Thank you very much. app.component.ts forkJoin( this.service1.method1(filter1), ...

javascriptangulartypescriptrxjs

Troubleshooting the "TypeError: Swiper.initialize is not a function" Issue in React Swiper using TypeScript

Struggling to implement Swiper in a project using nextJs and Typescript. Attempting to modify styles with injectStyle but encountering an error during initialization without knowing how to resolve it. import { useRef, useEffect } from "react"; im ...

reactjstypescriptnext.jsswiper.jsreact-swiper

Caution: [email protected] needs [email protected] - 3 as a peer dependency but it is not currently installed

After attempting to add Bootstrap to my Angular Project using the command npm install --g bootstrap I encountered the following warning message: npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You mus ...

node.jsangularnpm

Error: Unable to access the property "$emit" of a null value (null is specified as "THIS")

I am in the process of converting my project from JavaScript to TypeScript, and I am facing an issue where I am unable to call "this" in this context. <template> <transition name="modal"> <div class="modal-mask"> ...

javascripthtmltypescriptvue.jsthis

Adjusting the panel dimensions based on the screen size

One feature on my website is a sliding panel (Image 1) located on the right side. It appears and disappears when a button is clicked, covering the entire height of the screen.https://i.sstatic.net/dF5Zc.jpg Here's the CSS code for this sliding panel- ...

htmlcssangularcss-positionresponsive

Encountered an issue in React Native/Typescript where the module 'react-native' does not export the member 'Pressable'.ts(2305)

I have been struggling to get rid of this persistent error message and I'm not sure where it originates from. Pressable is functioning correctly, but for some reason, there is something in my code that doesn't recognize that. How can I identify t ...

typescriptreact-native

Issue with the footer occurring prior to displaying the content

After trying numerous solutions like flexbox and positioning, I still can't figure out how to place my footer component at the bottom before the container component is rendered. With an asynchronous data spinner loading above it, the layout looks quit ...

cssangularflexbox

Upon initialization, navigate to the specified location in the route by scrolling

My page has various components stacked one after the other, such as: <about></about> <contact></contact> I am utilizing the ng2-page-scroll to smoothly scroll to a particular section when a navigation link is clicked. However, I a ...

javascriptangulartypescript

Introducing a detailed model showcasing information sourced from an array of objects within Angular 14

I'm struggling to showcase detailed models for various elements in my project. In essence, I have a collection of cards that hold diverse information data. The objective is simple: upon clicking a button to reveal more details about a selected card, a ...

angulartypescriptangular-ui-bootstrap

Utilizing Props in TypeScript with React Styled Components

I created this styled component using TypeScript following the guidelines in their documentation import matrix from '../img/matrix.jpg'; const Style = styled.div` .fixed { background-image: url(${props => props.image ? pr ...

typescriptstyled-components

Is there a way to extract the HTMLElement[] type from the DOM?

In my TypeScript project, I am trying to gather all the top-level elements of a page using the code snippet below: const getHTMLElement() : HTMLElement[] { const doc = document.body.children; const list : HTMLElement[] = []; for (let c of Array.f ...

htmltypescriptdom