Canvas not displaying on mobile devices

android, canvas, html, ios, javascript

Solution

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.

Problem

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> ```

Original source