title: Canvas rendering performance
body: <p>I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a &lt;div&gt; which has a position:fixed CSS attribute before the &lt;canvas&gt; tag, the frame-rate skyrockets and the game becomes playable.</p>
  
  <p>Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?</p>
  
  <p>An outline of the code I'm working on:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;title&gt;Jump'n'Bump - HTML5&lt;/title&gt;
  &lt;meta http-Equiv="Cache-Control" Content="no-cache"&gt;
  &lt;meta http-Equiv="Pragma" Content="no-cache"&gt;
  &lt;meta http-Equiv="Expires" Content="0"&gt;
  &lt;meta name="viewport" content = "width=400px, user-scaleable=no"&gt;
  
  &lt;!-- javascript files included here --&gt;
  &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
    body { margin: 0px 0px 0xp 0px }
    canvas { border: 0px solid black; }
    img.resource { display:none; }
    #fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
    #gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
    canvas {
      image-rendering: optimizeSpeed;             // Older versions of FF
      image-rendering: -moz-crisp-edges;          // FF 6.0+
      image-rendering: -webkit-optimize-contrast; // Webkit
      image-rendering: optimize-contrast;         // Possible future browsers.
      -ms-interpolation-mode: nearest-neighbor;   // IE
    }  
  &lt;/style&gt;
  &lt;body onload="init()" text="#FFFFFF" bgcolor="#000000"&gt;
  
  &lt;!-- image resources like this here: --&gt;
  &lt;img class="resource" id='rabbits' src='rabbit.png'/&gt;
  
  &lt;!-- *** remove the line below and the game slows down *** --&gt;
  &lt;div id='fixed_div'&gt;&lt;/div&gt;
  
  &lt;div id="gameArea"&gt;&lt;canvas id="screen" width="400" height="256"&gt;&lt;/canvas&gt;&lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>