WebView on android zooms in - javascript

I'm making a game for android, the game and all the files are on my server and I'm using a webView to display the game in the app
So after I got the app and everything created I noticed no matter what I change on the webView or on the server it always zooms in so the user has to zoom out In order to play
Does anybody know how I can make the canvas and background image scale to width and height
I tried
var c = document.getElementById ('canvas');
c.width = window.innerWidth;
This works to resize the canvas but the enemy's will still follow the path of the image
Here is a link to the game http://deathcrow.altervista.org/0android/td/index.php
If you need any of the code let me know I didn't post any cause I am on my phone
Here are links to all my coding I'm not able to put it on here due to being on my phone
http://deathcrow.altervista.org/0android/td/js/mainLoop.js
http://deathcrow.altervista.org/0android/td/js/attackerUnits.js
http://deathcrow.altervista.org/0android/td/js/towerUnits.js
http://deathcrow.altervista.org/0android/td/js/bullets.js
http://deathcrow.altervista.org/0android/td/js/mouseClick.js

You should be able to get the webview not to zoom with:
webview.getSettings().setBuiltInZoomControls(false);
webview.getSettings().setSupportZoom(false);
webview.getSettings().setLoadWithOverviewMode(true);
Have you actually moved to coding it on a canvas instead? Am I answering your question?

Related

How can I set orientation to landscape in mobile REACT JS

I have a canvas in my project where you can draw a signature and save it. I'm using React JS and https://github.com/szimek/signature_pad which is great. But the problem i have is that i need to set the default orientation to landscape on mobile (I dont want to display a message like 'please use landscape' and then show the canvas).
If i rotate the canvas with something like: div.style.webkitTransform = 'rotate(90deg)';
visually it looks good, the problem is that when I draw a line to the right it goes down, if I draw a line to the left it goes up, etc (as if the canvas is in the original 0°)
Is there a way to change the orientation of canvas in anyway?
I found some library which was able in React Native only, tried to find a workaround with css and using The Screen Orientation API but nothing seems to work

Don’t scroll on a canvas to draw

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

Image Reposition on Mobile Devices

I am currently working on a website which uses a banner image on a profile. However if a user uploads an image the position of the banner may not be correct and they may want to change it to display the correct position of the image they want. So I have been following this guide: http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
I have used this guide and it works without error when I am on desktop screen sizes like 20" and above... However when ever I try to change the image position on mobile it doesn't scale correctly and the image thumb nail is not cropped correctly. But it works when the website is on a desktop because the image banner is full size... There is a demo on the website with the guide if you want to check it out and see what I am on about. I tried to see changing the crop width and height to match the mobile size but that means when it resizes back to a desktop the image is only scaled for a mobile then.
The problem is to do with:
$default_cover_width = 918;
$default_cover_height = 276;
As the screen size changes the default cover size changes as well...
I was wondering if anyone could point me in the right direction so that I could get this working on a mobile device as well.
Thanks.

How to disable auto rotate for a video preview in a Windows Phone 8.1 App using javascript/html5

I followed the tutorial below to create a Windows Phone 8.1 app for previewing the camera capture:
http://msdn.microsoft.com/en-us/library/windows/apps/Hh452789(v=win.10).aspx
However, there is an undesired behavior of this basic app. When the device is placed horizontally, with the top pointing to the left, the orientation of the preview is the same as the scene, which is fine. However, when the device rotates to the portrait position (top up), the preview auto rotates to a confusing orientation. Below is a picture demonstrating this behavior.
I guess what I want is the same behavior as the built-in Camera app of a Windows Phone, that the preview orientation always follows the camera (image panel) orientation. In other words, no matter how the device is rotated, the house roof tip should always point upward. Is that possible using the developer API? If so, what function or attributes should I use?
One potential solution I can think of is to disable auto rotate for the element that is used to hold the preview. However, I don't know how to do that. In addition, can one disable the auto rotate for only some elements in an app page instead of the entire page? I ask because I want to display some text over the video preview and I want the text to auto rotate for legibility.
MediaCapture _mediaCapture = new MediaCapture();
_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
await _mediaCapture.InitializeAsync();
await _mediaCapture.StartPreviewAsync();
Check the phone orientation on orientation changed and set the MediaCapture .SetPreviewRotation(VideoRotation.Clockwise90Degrees) as you want.

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.

Categories