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 };
Related
I am running a html game inside an iFrame. The game is displaying on a canvas.
I am testing the game on Chrome mobile simulator Pixel 5 device size 851x393
I was testing to see whether game display correctly when the user rotate the device.
portrait mode window.innerwith/height is showing as 851 1843
landscape mode window.innerwith/height is showing as 851 393
I am also puzzled, how can innter width/height change when the device rotate?
But the game does display correctly. Following are the elements of each state
Landscape
Portrait
With these settings the game display correctly.
When I rotate the device few times, the game got expand beyond the screen, as if we are looking at a zoomed upper left hand corner of the game.
However the elements seems to be exact match when it display correctly before. Even though game is not displaying correctly now.
Can anyone provide some assistance on this ?
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´m writing a webapp for an iPad with HTML5, JavaScript and jQuery. My users need to take pictures with the build-in camera. For that reason I am using input type="file". This works great in different browsers (Chrome/Safari Mobile) but the problem is that when I add my app to the homescreen and take a photo in lanscape fullscreen mode- iOS brings up the camera from the wrong side. To be clearer iPad in landscape mode camera slides in from the left side(should be from the bottom). It behaves like it was called from portrait mode and the picture has a dark part on the left side. The camera window automatically changes the orientation - I debugged it - twice (0°/-90°). When I finish taking the picture and return to the app it is displayed in portrait mode, even though holding it on landscape mode. And additionally the screen is somehow locked. Thsi behaviour doesen't occure holding the iPad in portrait mode. Anyone an idea how to solve this strange behaviour? I found that question but no answers...
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 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.