What is the problem of mouse misplacement in canvas?

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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e8dd90-118f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e8dd90-118f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?