Forums » Help » Problem with canvas in android

Wish I could be more helpful.
If you do figure this out, I'd love to hear what the problem was.

Did you edit any of the sample code?

If you have access to a console on your phone, check to see if the code is generating any errors. If you find errors, post them here and maybe we can give you a hand.

That is a weird bug. It almost looks like the canvas is being created over and over again.

Open up 'test.js' in Weltmeister, is the main layer being pre-renderered? I did a quick test on Firefox Mobile with Galaxy S3, and if the Main layer is pre-renderered I get the same result as the images you posted. Maybe Firefox OS doesn't support 'invisible' canvas elements very well, if not at all...

No progress yet. I've tried in Chrome, Firefox, and Opera browsers, all up to date from Google Play. To ITyl, the map was not set to pre-render and none of the code from the demo that Dominic supplies us was changed, I just pushed it straight to my server. It also renders properly on my friends' iPhones.

Not that I know what I'm talking about, but it seems like maybe there's something weird going on with resizing the canvas in impact, but I haven't figured out yet how to track it down. Oh, and I did try a debug console on my phone and the only issue it spit out was the viewport using ';' to separate values and it said to change it to comma separated, but that didn't help anything.

Thanks for the input so far!

It could be the Android phone, and maybe the code is fine?

I'd like to believe that, but because http://impactjs.com/demos/physics/ works perfectly on both my phone (Droid Razr Maxx) and Galaxy Note 10.1, but my hosted version does not render properly on either, there must be another issue.

I decided to investigate the lines of code around ig.main and play with the scaling. Here are the default values in Dominic's demo

var width = 320;
var height = 320;
ig.main('#canvas', MyGame, 60, 160, 160, 1);

I achieved slightly better results by setting the following lines in main.js

var width = 160; //changed from 320
var height = 160; //changed from 320
ig.main('#canvas', MyGame, 60, 160, 160, 1);

The canvas was off center and the framerate was very choppy, maybe half of what it should be, but the canvas size matched Dominic's demo, and there weren't weird redraw artifacts.

And then I tried

var width = 320;
var height = 320;
ig.main('#canvas', MyGame, 60, 160, 160, 2);

Setting the scaling factor to 2 fixed the framerate, though the game canvas was now twice as large as it should be. It also seemed to fix a blurriness that the other settings suffered.

Thinking that all I needed to do was use a scaling factor of 2 and match my canvas size correclty, I next used:

var width = 160;
var height = 160;
ig.main('#canvas', MyGame, 60, 80, 80, 2);

But this was no good. The canvas was the right size, but all the sprites were scaled 2x and the framerate was poor again.


I think the weird drawing issues you see in my original post were related to the game canvas (ie the size and scale set in ig.main) being smaller than the width and height variables, so I was drawing on a canvas which was larger than the camera and those areas outside the camera weren't being set as damaged and redrawn. Given the results here, does this help any of the more experienced programmers understand what's going on?

edit - I also just copy/pasted the game.min.js from Dominic's hosted physics demo into a file on my server and linked to it in my .html, it works perfectly. I thought maybe baking the file would have an effect, but baking my own game.min.js from the demo zip doesn't fix my problems. Seems to me he has some code in his version that differs from the demo zip file.

And the plot thickens! If only I had an Android so that I could test this out...

@brave_beard: Give this a try on your android phone: http://labs.aurava.com/javascript/physics/

Ah wonderful! ITyl, I used your resize function in index-mobile.html

<script type="text/javascript">
        function resizeCanvas(){
            canvas = document.getElementById("canvas");
            if(canvas.width < window.innerWidth){
                canvas.width = window.innerWidth;
            }

            if(canvas.height < window.innerHeight){
                canvas.height = window.innerHeight;
            }
        }
    </script>

<body onresize="resizeCanvas()" onload="resizeCanvas()">

My physics demo finally looks exactly like it is supposed to! The demo you linked to also seems to work just fine. It looks like you removed all the resizing and scaling from within main.js. Can I ask what this section of code looks like in your main.js? Or did you achieve that in some other way?

var width = 320;
var height = 320;
ig.main('#canvas', MyGame, 60, 160, 160, 2);

Any idea on what caused this issue? I'm brand new to canvas so I'm not bright enough to connect the dots yet, but I'm trying to learn from the past few days of banging head against wall=) Thank you so much!

	ig.Sound.enabled = false;
	var width = window.innerWidth;
	var height = window.innerHeight;
	ig.main('#canvas', MyGame, 60, width, height, 1);

Is the only change made to main.js. It is pretty iffy, and it doesn't really fix the problem, it just makes it so you can't -see- the issue. All I did was set the canvas to fill up the entire size of the mobile window. I commented out all of the other scaling in main.js in that example mainly to simplify things and to force mobile view only.