Unable to draw on Android Chrome Browser about atrament HOT 8 CLOSED

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

from atrament.

@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?

from atrament.

@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.

from atrament.

this is now resolved in #39

from atrament.

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

from atrament.

@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?

from atrament.

@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:

I am using lasted android chrome version

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

from atrament.

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

from atrament.