Don’t scroll on a canvas to draw - javascript

I have a webpage to learn draw and add but I have a problem, when I use this in a Desktop browser it’s ok, but when use It in a mobile browser, I can’t draw because my page do scroll. I need that the mobile browser won’t do scroll when draw in the canvas. Thanks for your help.

I change the canvas for a new canvas with angular

Related

HTML canvas not scrolling window on Android Chrome

I have a problem, trying to scroll window while touching mobile canvas. This only happens for Android Chrome, and works on ios Chrome and default mobile web browsers.
I don't know where the problem is because of getting the canvas applied to a surface by a 3rd party client, and i'm not able to modify that code.
Any suggestion?
Defining an own scroll function would be one.
I found the reason for this, and no longer need a answer.
The canvas had the style attribute touch-action: none.

Ability to zoom in/out and shaking canvas on ipad

We have been trying to build a map for a client where users can:
Use a joystick to navigate left and right
Zoom in/out on the canvas
Select a specific building and have that center align for them
Everything works great on a PC but when we try to use an iPad 2 problems happen:
The screen becomes quite shaky
When you zoom in on the screen the quality of the map drops, even though the map is over 10mb and the quality is good for some reason it becomes pixelated.
URL: http://bit.ly/1MDcVhV
Does anyone have experience with such problems.
Thanks.

Android Tablet paper.js on zoomed canvas

I got problem on Android Tablet (Galaxy Tab 2). When having a big image, and using paper.js to draw paths on it, everything is fine, but when I zoom the image (only if it is big enough), paper.js stops drawing paths on a certain width and height... the image on canvas is still being displayed (background-image with width and height set to 100%), but it seems that paper.js is unable to draw farther than some width and height. Any idea what is going on or how to fix it?
If something isn't well explained, please give me feedback. I really need to get it working. Today.

fabrics on image editor mobile device

I want to make a simple image editor (drag, rotate, resize) in javascript. It has to work at tablet and mobile phones.
Fabric seems to be very fast. The only problem is that rotating / resizing don't work intuitive (sometimes you click and nothing happen). Does anybody know there is a solution for this in Fabric.
Or is there a other fast platform to create a fast editor
fabric example rotating resize

HTML5 Canvas on Android Phones - Redraw and Highlight Issues

I am having a redraw issue, when you are scrolling the canvas will not redraw until you release your touch. The problem with that is I depend on "ontouchmove" to move my character around. So until the touch is release, the canvas will not redraw.
Another problem is when ever the canvas is touched it is focus, or activated. It develops a focus ring around it. I tried setting both the :focus and :active pseudo's borders and outlines to nothing. Also I saw "drawFocusRing" for the context of the canvas, however that didn't seem to resolve the issue.
Currently I tested on Android stock browser 2.2 (MyTouch 3G)
I believe the orange focus ring is more in relation to the WebView you are using to view the canvas maybe? I know I had a similar issue with js drawing on a canvas.
myWebView.setFocusable(false)
myWebView.setFocusableInTouchMode(false)
Should solve the focus problem.
I don't know about Android specifically, but in mobile Safari you can prevent scrolling using the event.preventDefault() method. If your application requires scrolling, it might be possible to implement your own scrolling mechanism whilst still preventing the default behaviour, maybe by combining touch events with CSS positioning on a page wrapper div?

Categories