Geek Answers Handbook

Canvas not displaying on mobile devices

HTML5 canvas (using drawImage only) is not displayed on mobile devices, but is on my laptop.

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

I am not getting any errors or anything else, but it does not appear in chrome on iOS or the default browser on Android.

EDIT:

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

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
+4
source share
2 answers

The init() function is called by imgLoad() , but you only load images 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, so your code works fine.

When you include the meta viewport tag with width=device-width , the browser sets the width of the page / window to the width of the screen (for example, 320 pixels on the iPhone), and therefore imgLoad() and init() never called.

+3
source

It looks like you are trying to draw images before loading them. I'm not sure why mobile browsers fail more often, maybe they load them all slower?

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 will appear (because by that time the images had loaded).

If you were dealing with only one image, simplified code:

 var img = new Image(); img.onload = function(){ // drawing code goes here } img.src = 'myfile.png';

But due to the large number of images you have here, I would look into the resource loading library.

0
source

More articles:


All Articles