SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Canvas problem on touch devices

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    Any help would be appreciated.
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    I've just noticed this has been moved to the mobile forum.
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •