jakubfiala / atrament

A small JS library for beautiful drawing and handwriting on the HTML Canvas.
http://fiala.space/atrament/demo
MIT License
1.57k stars 115 forks source link

Unable to draw on Android Chrome Browser #36

Closed Ben76 closed 8 months ago

Ben76 commented 7 years ago

I have a canvas in a Bootstrap Modal.

Works perfectly well on a PC; Not working on Android phone

Used to work well until Chrome released a new version for Android. (on 18th Oct)

Even now, if canvas placed directly on form, it works. Doesn't work when placed in Modal.

jakubfiala commented 7 years ago

@Ben76 thanks for submitting the issue. Can you see any errors being thrown in the console? Alternatively, can you create a codepen/jsbin that demonstrates the issue?

bencergazda commented 6 years ago

@Ben76 @jakubfiala I was having the same issue. In my case, it occured only when we needed to scroll downwards the page to the canvas. In this situation, the scrollTop gets added to the mouse position when drawing (see + document.documentElement.scrollLeft in src/atrament.js#L31). Like this, if we scroll down for 10px, and the start painting, the drawing appears 10px under the mouse cursor/touch point.

See: https://codepen.io/bencergazda/full/OapvVL/

I did a quick test with removing the addition of document.documentElement.scrollLeft. This fixes the issue on Mobile Chrome, and looks like not causing problems in other browsers (Firefox, Desktop Chrome, Mobile Safari)

I can make a pull request with a fix.

jakubfiala commented 6 years ago

thanks for submitting the PRs @bencergazda – and sorry I'm getting to this late!

both PRs are looking good – going to approve & merge, then test the changes and publish

jakubfiala commented 6 years ago

this is now resolved in #39

viettq1986 commented 4 years ago

Hello, I get the same stuck. Can you please check my app. I can draw perfect on desktop and chrome simulator on desktop and main browser of android. But I can's draw correct on android chrome. It seem i get incorrect coordinate on touch

My app: https://zcolorqa.azurewebsites.net/

Many thanks

jakubfiala commented 4 years ago

@viettq1986 thanks for reporting the issue. Could you please let me know how I can replicate the issue in your app? I'm having trouble finding the place where Atrament is used.

Also, what version of Android (and Chrome) are you using?

viettq1986 commented 4 years ago

@viettq1986 thanks for reporting the issue. Could you please let me know how I can replicate the issue in your app? I'm having trouble finding the place where Atrament is used.

Also, what version of Android (and Chrome) are you using?

Hello, Sorry for your Atrament.

Please see my step by step:

image

image

image

image

I am using lasted android chrome version

image

My function for get mouse and touch coordinates getCoordinate = (e, canvas) => { let coordinate = { x: 0, y: 0 };

if (e.touches && e.touches.length > 0) { let touch = e.touches[0]; //Get the information for finger #1 let rect = canvas.getBoundingClientRect();

//coordinate.x = Math.floor((touch.pageX - rect.left) * (canvas.width / rect.width));
//coordinate.y = Math.floor((touch.pageY - rect.top) * (canvas.height / rect.height));

coordinate.x = Math.floor((touch.pageX - rect.left) * (canvas.width / rect.width));
coordinate.y = Math.floor((touch.pageY - rect.top) * (canvas.height / rect.height));

let matrix = canvas.getContext("2d").getTransform();
let iMatrix = matrix.invertSelf();

coordinate = applyToPoint(iMatrix, coordinate);

} else { if (e.offsetX) { coordinate.x = e.offsetX; coordinate.y = e.offsetY; } else if (e.layerX) { coordinate.x = e.layerX; coordinate.y = e.layerY; } else if (e.clientX) { coordinate.x = e.clientX; coordinate.y = e.clientY; } }

return coordinate; }

Thank you very much

jakubfiala commented 8 months ago

@viettq1986 I believe your issue might be solved in v4.0.0 - please feel free to reopen if the issue occurs again