title: HTML5 IOS WebApp canvas not rendering when launched from homescreen
body: <p>I have a simple HTML5 webapp that uses javascript to create a canvas context and draw a simple image of a caret (^) which is then referenced in the definition of a CSS class to render the image on multiple  tags.</p>
  
  <p>The application displays fine in a browser: have tried Google Chrome (Win7), Mobile Safari (iPad IOS4 &amp; IOS5, iPod (IOS4 &amp; IOS5). 
  But if on the iPad or iPod I "Add to Homescreen" and then launch the webapp the ^ image is not rendered onto the .</p>
  
  <p>I am aware there are differences in the way HTML5 is rendered when launched from the homescreen as opposed to viewed in Safari, but my searches haven't turned up anything that would indicate that this shouldn't work. </p>
  
  <p>I would appreciate if anyone could shed some light on this for me.</p>
  
  <p>Code sample below:</p>
  
  <pre><code>**(index.html)**
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="styles/main.css" &gt;
      &lt;script src="scripts/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="scoreboard-item-wrapper"&gt;
      &lt;div class="scoreboard-item"&gt;
          &lt;div class="box" &gt;&lt;button id="btn_homegoalup" class="up" onclick="incAction(true,true)"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  **(main.js)**
  initChevronUp("chevron-up", "hsl(228, 1%, 50%)");
  
  function initChevronUp(id, style) {
     var context = document.getCSSCanvasContext("2d", id, 22, 13);
  
      context.save();
      context.translate(4,0);
      context.clearRect(0, 0, 20, 13);
      context.strokeStyle = style;
      context.lineWidth = 3;
  
      context.beginPath();
      context.moveTo(1, 9);
      context.lineTo(6.5, 1);
      context.lineTo(12, 9);
      context.stroke();
  
      context.restore();
  }
  
  **(main.css)**
  
  .scoreboard-item .box button.up{
      background:
          -webkit-gradient(linear,left top, left bottom,
              from(rgba(255, 255, 255, .25)), to(transparent) ),    
          -webkit-canvas(chevron-up) center center no-repeat transparent;
  }
  </code></pre>