title: HTML5 Canvas & z-index issue in Google Chrome
body: <p>I have found that applying a z-index to a canvas that has <code>position:fixed</code> causes Chrome to stop rendering all other elements which have <code>position:fixed</code> properly. However, this only happens if the canvas is greater than 256x256px in size.</p>
  
  <p>Here's an example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      h1     { position: fixed; }
      body   { height: 2000px; }
      canvas { position: fixed; z-index: -10; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Test Title&lt;/h1&gt;
    &lt;canvas id="backgroundCanvas" width="956" height="256"&gt;&lt;/canvas&gt;
    &lt;script&gt;
    // draw basic shape
    (function() {
      var c = document.getElementById("backgroundCanvas");
      var ctx = c.getContext("2d");
  
      ctx.beginPath();
      ctx.moveTo(0,100);
      ctx.lineTo(0,0);
      ctx.lineTo(100,0);
      ctx.lineTo(1000,1000);
      ctx.fillStyle = "rgb(117, 164, 68)";
      ctx.fill();
      ctx.closePath();
    })();
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If you paste this into a html document and open it in Chrome, you should see what I mean.</p>
  
  <p>My question is, does anyone know of a way I can get around this issue?</p>