What is the problem of mouse misplacement in canvas?

Kotlin
IOS
VB.Net
SQL
Node.js
Swift
Ruby
Go
Oracle
Git
Laravel
Mongodb
Asp.Net
More...

I implemented a scratch card component effect with canvas
but there is a bug
quasi-basket mouse position
smear position is correct when the mouse position is on the right edge
there is a shift when the mouse position is on the left edge, as shown
my code is as follows:

this.context.arc(touch.pageX - this.canvas.offsetLeft, touch.pageY - this.canvas.getBoundingClientRect().top + 10, 20, 0, Math.PI * 2);

what is the reason for the shift? Also look at the correction, thank you

Vue.js canvas javascript

Jul.11,2022

let bounding = this.canvas.getBoundingClientRect()
this.context.arc(touch.clientX - bounding.left, touch.clientY - bounding.top + 10, 20, 0, Math.PI * 2)

try to see if it works

Previous: How do you define a paradigm type to return all attribute names that implement a specific type in the original type?

Next: Who has used a project that has been used with vue arcgis

False
Django, Why does the system automatically generate an empty session? every time the request is made?
Use python to convert dict1 to dict2, in the example. I tried for a long time but couldn't find a solution.
How to self-start the php-fpm service when building a LNMP environment with docker?
Can an array in react state be bound to a dom state using an element in the array?
Wechat browser version 6.6.5 cannot prevent the springback of pull-up and drop-down to the top under ios system.
In express+hbs, how do you define the routed data as a variable on the page?
How to use symbol reference of Iconfont in dva
How to elegantly add data to JSON objects?
Using node to build video streaming server
The proportional width of the echarts graph is inconsistent.
React uses axios to call the background data. After success, how to jump to the page based on the returned value?
I don't understand what a linux command means. Please explain it.
Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.
Running nodejs reports fewer errors ")"

How does weui extend parameters?
Could you tell me how to achieve this data structure?
When slice is used for file cutting, FileReader is used to get the result error of each cutting element.
How do I use IntelliJ to run a program with a redirect symbol?
What is the problem with the lock of the Innodb engine in Mysql?