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.
Related
I am trying to create a canvas in html that the user can draw on. It works fine with any mouse-device like a pc or max. It also works fine with a non-ios touch devices (like an android/windows tablet). But with ios-touch devices (like an ipad or iphone) it doesn't work. When you try to draw, it scrolls the page while you draw. Any idea how to disable this scrolling action on ios devices while drawing on the canvas?
Here is an example of a html drawing canvas http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ Try and draw on one of the canvases on an ipad or iphone, BUT NOT THE FIRST DEMO, for some reason the first demo works but none of the others work.
I got it working by using onTouchStart, onTouchMove, onTouchEnd.
For onTouchMove, you'll get an array of changedTouches. For pen usage, the first one will do since there won't be multiple touch events at a time.
const position = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
i have to develop a website where user comes and have some area for free drawing.
like some sketch and then save the image on server. so I chooses canvas.. since we can easily draw line, points based on mouse (x,y) changes
But problem came when tested on mobile browser like samsung galaxy tab, e.g., using its pen; canvas is not editable. seems like mouse down doesn't trigger.
ctx = document.getElementById('myCanvas').getContext("2d");
$('#myCanvas').mousedown();
or any other javascript api for free drawing that works for both desktop and mobile will be appreciated.
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'
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.
I built a website, and the designer who drew the design of the page has Mac computer. He says that Mouse wheel scrolling doesn't work, only the browsers left "slider" works. I mean when you are with your mouse in center of the screen and you do the mouse wheel scroll, the page doesn't move, and if you drag Browsers scroll - it moves.
The thing is that I've been only using PC so I've got no idea - why that can happen with a website on Mac. It works fine in 5 browsers (IE, Opera, FF, Chrome and Safari on PC), and mouse scroll has problem in any browser on Mac.
Can anyone share with your ideas why could that happen and maybe how to fix it. I have 0% experience with Mac, I don't even know what to do after turn on/off button :)
P.S. i tagged PHP, CSS and HTML because the website is developed using those languages and Flash player & slider.
www.ninogvetadze.com/new
Before you go ahead and deem it a code problem, I'd have your mac user clean his scroll wheel out with either a.) an alcohol wipe or b.) a piece of paper. Rub the mouse ball with the wipe, or apply pressure to it with the paper and roll it back and forth to git any dirt out. I'm willing to bet it is a hardware issue rather than code.
If it is a newer mouse without the scroll ball, then... well, I lost the bet.
only the browsers left "slider" works
If it's on the left, it ain't the browser's standard scroll bar.
mouse scroll has problem in any browser on Mac.
Because all those browsers are using the same Flash player plugin.
the website is developed using those languages and Flash player & slider.
Yep. There you go - the Flash "slider" obviously wasn't tested on a Mac. Now you know why designers with a clue rely on standard-based approaches instead of Flash.
(Edit) Yep - just used the address in your comment above to look at your site. There's a "macmousewheelflash.js" being loaded, which apparently has something to do with adding mouse wheel support to the Flash movie at the top. Looks like that's interfering with proper wheel support for the rest of the page. You could probably just remove that - I don't see where the Flash movie needs to scroll anyway. Or, for that matter, why you need Flash for a simple cross-fade slide show...