title: Sluggish UI in drawing/sketching web app on Mobile Safari (HTML5 canvas)
body: <p>We have been playing around with the canvas element, but are encountering sluggishness on Mobile Safari whereas the app works smoothly on the desktop.</p>
  
  <p>The test app is very primitive. It just lets the user draw a line using the mouse on a desktop or a finger on smart phones.</p>
  
  <p>In Mobile Safari, the drawing of the line is often very jerky. The first bit of a line will render in real-time, but the rest won't render until after the finger is lifted from the screen.</p>
  
  <p>Any ideas why?</p>
  
  <p>Code below.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;    
              &lt;link rel='stylesheet' href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' /&gt;
              &lt;script src='http://code.jquery.com/jquery-1.6.4.min.js'&gt;&lt;/script&gt;
              &lt;script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'&gt;&lt;/script&gt;            
              &lt;style type='text/css'&gt;
                  #canvas { border:1px solid red }
              &lt;/style&gt;        
     &lt;/head&gt;
  
     &lt;body&gt;    
              &lt;div id='draw_page' data-role='page'&gt;
                 &lt;canvas id="canvas" width="500" height="350"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
  
              &lt;script type="text/javascript"&gt; 
                $('#draw_page').live('pageinit', function() {
                  prep_canvas();
                  });
              &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;
  var canvas;
  var context;
  
  function prep_canvas() {
  
  canvas = $('#canvas')[0];
  context = canvas.getContext("2d");
  
  }
  
  $('#canvas').live('vmousedown', function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
  
    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw();
  });
  
  
  $('#canvas').live('vmousemove', function(e){
    if(paint){
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
      redraw();
    }
  });
  
  
  $('#canvas').live('vmouseup', function(e){
    paint = false;
  });
  
  
  function addClick(x, y, dragging)
  {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
  }
  
  
  function redraw(){
    canvas.width = canvas.width; // Clears the canvas
  
    context.strokeStyle = "black";
    context.lineJoin = "round";
    context.lineWidth = 2;
  
    for(var i=0; i &lt; clickX.length; i++)
    {     
      context.beginPath();
      if(clickDrag[i] &amp;&amp; i){
        context.moveTo(clickX[i-1], clickY[i-1]);
       }else{
         context.moveTo(clickX[i]-1, clickY[i]);
       }
       context.lineTo(clickX[i], clickY[i]);
       context.closePath();
       context.stroke();
    }
  }
  </code></pre>