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.
Related
We run the graphical part of our software in Canvas. With the latest version of Google Chrome (v77) being released, our product doesn't display anything on load. Canvas simply doesn't draw anything.
When you resize the windows or scroll, Canvas draws the elements correctly, but not initially. For every refresh, we are back to a blank page.
If we disable Accelerated 2D canvas, it works. We have tried the upcoming versions of Google Chrome (v78 and v79), and here canvas renders and draws correctly.
Does anybody experience anything similar, i.e. is it a Chrome bug?
Dropzonejs doesn't work with Chrome 77 on Android. It is probably same isue with canvas.
more on this isue here
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´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.