CODEWITHSUNDEEP
javascriptandroidioshtmlcanvas
Max Hudson
Max Hudson

Reputation: 10206

Canvas not displaying on mobile devices

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

You can see here : mmhudson.com/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>

Upvotes: 4

Views: 7230

Answers (2)

Jeffery To
Jeffery To

Reputation: 11936

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.

Upvotes: 3

beeglebug
beeglebug

Reputation: 3542

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.

Upvotes: 0

Related Questions