Unable to draw on Android Chrome Browser

[Ben76]

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]

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

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

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]

this is now resolved in #39

[viettq1986]

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]

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

@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

[jakubfiala]

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