title: HTML5 Canvas render glitch
body: <p>I'm having an issue with drawing an image on a canvas (and would appreciate some help) :)</p>
  
  <p>I'm building an app that let's the user select an image and then draw on it. I'm using a canvas to render it all. The problem is this: when I've selected an image I draw the image on the canvas (which is centered on the screen) but as you can see in my screenshot it draws it twice - one of them is OUTSIDE of the canvas (window position 0,0).</p>
  
  <p>Is this a glitch in the android webview??</p>
  
  <p>(I'm using Cordova/Phonegap 2.7)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box_canvas box_canvas_doodle shadowbox50"&gt;
  &lt;canvas id="canvas_doodle" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT (snippet):</p>
  
  <pre><code>$(".box_canvas_doodle").css( "left", Math.floor(($(window).width()-image_resized_wid)/2) );
  $(".box_canvas_doodle").css( "top", Math.floor(($(window).height()-48-image_resized_hei)/2) );
  
  // Clear
  doo.ctx.doodle.clearRect(0, 0, doo.canvas.doodle.width, doo.canvas.doodle.height);
  
  // Draw image
  doo.ctx.doodle.drawImage(doo.imageElem, 0, 0, doo.imageElem.width, doo.imageElem.height, 0, 0, doo.canvas.doodle.width, doo.canvas.doodle.height);
  </code></pre>
  
  <p><a href="http://storage.rejh.nl/_stored/Screenshot_2013-07-25-08-36-53.png" rel="nofollow noreferrer">Screenshot http://storage.rejh.nl/_stored/Screenshot_2013-07-25-08-36-53.png</a></p>