I am developing a web-app that uses dragging a handle over a constrained path (quarter of a circle). The tool is HTML5 canvas and the problem is bad responsiveness - the handle falls behind the finger , when dragging the handle with your finger. This happens on older mobile devices with slower processors. Is there any way make the sliding (look) smoother? I don't need coverage on all smartphones but the iPhone 2, 3 and some older android devices are really slow right now.
Are there any other approaches that I can use? CSS3 webkit?
An example of the slider (works with mobile devices only): http://jsfiddle.net/TtgYH/1/
<canvas id="myCanvas" width='300' height='500'
Related
The new FB paper app website has html5 videos when seen from a non-mobile device.
A video like effect is achieved on the mobile website (tried on iOS browsers) using some kind of weird sprites.
Does anybody know how to implement that?
I think that used a method originally used by Apple.
Take a look at this
I would like to do a simple HTML5 golf game. And I found this, http://www.html5canvastutorials.com/labs/html5-canvas-interactive-ball-physics/
I've change the gravity to 0 and it works perfect for what I want! But there is a problem, when I test it on my smartphone or tablet, after I drag the ball, then the ball will immediately snap to the top left position which I think is X=0 Y=0.
How I can make this HTML5 canvas work perfectly as same as the desktop browser in my smartphone or tablet?
Depending on what the smartphone/tablet is you should implement support for touch or pointer events. As mouse events will not be triggered for those devices.
I am currently having problems with the HTML5 input[type=range]. It is fine in chrome on the desktop, but has some issues on smartphones. It is difficult to change the slider with big fingers. Plus you can't really slide, you can only click the range input.
How have you integrated this in your HTML5 websites?
The HTML5 input[type="range"] shows a slider that works great on desktops.
On touchscreen phones you have to tap; not slide. Except on iOS, where you first have to tap the slider button and then you can slide it.
If you want to build a better slider on smartphones you should probably take a look at jQuery UI or some kind of mobile framework (jQtouch, jquery mobile, etc). They will optimize the output based on the device.
Multi-touch isn't just for mobile devices any more. When will I be able to start using touch and gesture events in web apps on my MacBook Pro (or any other device with a touchpad or trackpad)? For example, I'd like to pinch-to-zoom on Google Maps.
Along with other HTML5 features, caniuse.com keeps a pretty good pulse on things:
http://caniuse.com/touch
(currently it's not looking good)
I have an Android Asus Eee Pad Transformer android.
My problem is that I've created a html5 canvas to draw using touch and all I get is a point, cannot draw.
Is this to do with the browser or with the Tablet?
Anyone have any ideas on what the problem could be please?
Have you tested another browser such as Dolphin? This should give you a better idea as to whether it's the tablet or the browser.
My first guess would be to say it's more the tablet and the way your finger gets translated to the canvas. The canvas may not interpret you sliding your finger as a mouse click and drag.