title: phonegap JavaScript canvas doesn't work
body: <p>I've found a simple JavaScript bouncing ball animation, it works on chrome browser (PC)
  When I run it, using Phonegap eclipse android emulator it compiles but canvas is blank and the following message displayed "unfortunately system ui has stopped"</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript" charset="utf-8" src="cordova.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" charset="utf-8"&gt;
  
  &lt;script&gt;
  var context;
  var x = 100;
  var y = 100;
  var radius = 20;
  var dx = 5;
  var dy = 5;
  
  function init(){
      context = myCanvas.getContext('2d');
  
      //Set an interval for the canvas to be refreshed.
      // Basically call the draw function every 10 ms
      setInterval(draw, 10);
  }
  
  function draw(){
      //Clear the old circle before we draw the new one
      context.clearRect(0,0, myCanvas.width, myCanvas.height); //This erases the entire canvas
  
      context.beginPath();
      context.fillStyle = "#0000ff";
  
      //Draw a circle of radius 20 at the current coordinates on the canvas. 
      context.arc(x, y, radius, 0, Math.PI*2, true); 
      context.closePath();
      context.fill();
  
      //Check boundaries and negate if necessary
      if (x + radius &lt;= 0 || x - radius &lt;= 0 || x + radius &gt;= myCanvas.width || x - radius &gt;= myCanvas.width)
          dx = -dx;
      if (y + radius &lt;= 0 || y - radius &lt;= 0 || y + radius &gt;= myCanvas.height || y - radius &gt;= myCanvas.height)
          dy = -dy;
  
      //Increment dx,dy
      x+=dx;
      y+=dy;
  }
  &lt;/script&gt;
  
  
  &lt;title&gt;Ball Bouncing&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body onLoad = "init();"&gt; &lt;!-- when the body is loaded, call the init() function --&gt;
  &lt;canvas id = "myCanvas" width ="500" height = "400"&gt;
  &lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also for some reason it works if i remove the following:</p>
  
  <pre><code>  &lt;script type="text/javascript" charset="utf-8" src="cordova.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" charset="utf-8"&gt;
  </code></pre>
  
  <p>ok so i removed </p>
  
  <pre><code>  &lt;body onLoad = "init();"&gt; 
  </code></pre>
  
  <p>and added </p>
  
  <pre><code>   document.addEventListener("deviceready",init,false); 
  </code></pre>
  
  <p>and i get the following logcat:</p>
  
  <pre><code>     09-23 21:53:30.886: E/Web Console(796): Uncaught SyntaxError: "Unexpected token &lt; at   file:///android_asset/www/index.html:7" whats is wrong ?
  </code></pre>
  
  <p>please help</p>