HTML5 canvas (only using the drawImage function) is not showing up on mobile devices, but is on my laptop.

You can see here : mmhudson/index.html (reload once)

I get no errors or anything, but it doesn't display in chrome on iOS or the default browser on android..

EDIT:

This problem only occurs when the following meta tag is included in the document:

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

HTML5 canvas (only using the drawImage function) is not showing up on mobile devices, but is on my laptop.

You can see here : mmhudson./index.html (reload once)

I get no errors or anything, but it doesn't display in chrome on iOS or the default browser on android..

EDIT:

This problem only occurs when the following meta tag is included in the document:

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

• javascript
• android
• ios
• html
• canvas

Share Improve this question Follow edited Jan 30, 2013 at 15:33 Max Hudson asked Jan 30, 2013 at 1:12 Max HudsonMax Hudson 10.2k1515 gold badges6161 silver badges110110 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +50

Your init() function is called by imgLoad(), but you're loading images only when the window width is greater than or equal to 480px:

        window.onload = function(){
            s.dL = true;
            s.width = window.innerWidth;
            s.height = window.innerHeight;


            if(s.width < 320){
                //too small
            }
            else if(s.width >= 320 && s.width < 480){
                s.scWidth = 296;

            }
            else{
                s.scWidth = 456;
                b_border.src = "res/480/b_border.png";
                r_border.src = "res/480/r_border.png";
                l_border.src = "res/480/l_border.png";
                t_border.src = "res/480/t_border.png";
                br_corner.src = "res/480/br_corner.png";
                tr_corner.src = "res/480/tr_corner.png";
                bl_corner.src = "res/480/bl_corner.png";
                tl_corner.src = "res/480/tl_corner.png";
                h_wall.src = "res/480/h_wall.png";
                v_wall.src = "res/480/v_wall.png";
                box.src = "res/480/box.png";
                crosshair.src = "res/480/crosshair.png";
                player1.src = "res/480/player1.png";
                player2.src = "res/480/player2.png";
            }
        }

When you omit the meta viewport tag, the browser assumes a page / window width of 980px, and so your code runs normally.

When you include a meta viewport tag with width=device-width, the browser sets the page / window width to the width of the screen (e.g. 320px on iPhone), and so imgLoad() and init() is never called.

It looks like you are trying to draw the images before they have loaded. I'm not sure why the mobile browsers would fail more often, possibly they are slower to load them all in?

In fact, when i open your page on my desktop, sometimes the canvas does not draw, but if I open the console and enter draw() it appears (because by then the images have loaded).

If you were dealing with just a single image, the simplified code would be:

var img = new Image();

img.onload = function(){ 

    // drawing code goes here

}

img.src = 'myfile.png';

But because of the large number of images you have here, I would look into a resource loading library of some sort.