Canvas problem on touch devices

Mobile
1

I am using this: http://www.crowdsavings.com/open-source/drawbox (http://page-test.co.uk/jquery.drawbox.js is the main JS file).

It works fine on desktop browsers, but there is an issue on every Touch mobile phone I have tried.

When you draw on the canvas and then go to click a button off the canvas, it doesn’t work. You need to touch off the canvas and then the button. So using the demo above, if you draw on the canvas and then click the ‘Clear Canvas’ button, it doesn’t work and you have to press it again.

I have tried setting focus on the body and also detecting what the focus is when a touch action is performed, but no luck. I know the entire screen is responsive to touch and mouse events, where I would have thought it best to just make the canvas section respond to touch/mouse events.

Any help would be appreciated.

Thanks.

2

Apple seem to provide some details on how to achieve this.
Adding Mouse and Touch Controls to Canvas

Do you experience the same trouble with the sample code they use on there?

3

Thanks for the link, it’s certainly got lots of info on there.

I’ve tried to use the Apple method, but I’m having difficulty even getting it to function as drawing on the canvas. My JS isn’t great. The thing is the script I have is perfect in every way except for this one problem.

I’m thinking there must be a simple command that shifts focus off the canvas, and I’m pretty sure that would go at the end of the drawingStop() function. I tried document.body.focus() but it doesn’t work. There must be a simple way to simply lose the focus. If you just touch of the canvas then it does that, so I just need JS to perform the action of touching off the canvas.

Is there a way to do lose focus, or make something other than the canvas get focus?

Thanks again for the link. There are one or two other things on there I may need for something else.

4

I’ve just noticed this has been moved to the mobile forum. Can someone move it back to JavaScript, as that is what’s needed?

I know the issue is present on mobiles, but it could easily happen on desktops too.

I have designed this for use on a desktop mainly, but with mobile support (just briefly testing on them), I wouldn’t say I was ‘developing for a mobile device’ as the forum suggests.

5

I moved it to Developing for Mobile Devices, since the people in the JavaScript forum rarely deal with mobile devices or issues in regard to them.

Since the JavaScript forum has already provided what limited help it can in regards to the mobile devices issue that you have been experiencing, shall we at least see if anyone here in the Developing for Mobile Devices forum has anything more useful to add in regards to troubleshooting mobile phone touch events in relation to the canvas and buttons?