title: html-5 canvas performance in android device
body: <p>I'm using html-5 canvas and phone-gap to develop a simple scribble(drawing) app .it works very well in browser .but when i convert scribble html  to scribble.apk file using phone-gap and tried that in android device it works very very slowly .It means that it puts single dot in screen after 5 seconds from writing.</p>
  
  <p>Is there any alternatives in html 5 canvas to improve better writing experience in android device? so that it will put the pixels in my screen without delay.  </p>
  
  <p>here is my code .</p>
  
  <pre><code>&lt;html&gt;
  &lt;script type="text/javascript"&gt;
  var canvas, ctx, flag = false,
      prevX = 0,
      currX = 0,
      prevY = 0,
      currY = 0,
      dot_flag = false;
  
  var x = "black",
      y = 2;
  
  function init() {
      canvas = document.getElementById('can');
      ctx = canvas.getContext("2d");
      w = canvas.width;
      h = canvas.height;
  
      canvas.addEventListener("mousemove", function (e) {
          findxy('move', e)
      }, false);
      canvas.addEventListener("mousedown", function (e) {
          findxy('down', e)
      }, false);
      canvas.addEventListener("mouseup", function (e) {
          findxy('up', e)
      }, false);
      canvas.addEventListener("mouseout", function (e) {
          findxy('out', e)
      }, false);
  }
  
  function color(obj) {
      switch (obj.id) {
          case "green":
              x = "green";
              break;
          case "blue":
              x = "blue";
              break;
          case "red":
              x = "red";
              break;
          case "yellow":
              x = "yellow";
              break;
          case "orange":
              x = "orange";
              break;
          case "black":
              x = "black";
              break;
          case "white":
              x = "white";
              break;
      }
      if (x == "white") y = 14;
      else y = 2;
  
  }
  
  function draw() {
      ctx.beginPath();
      ctx.moveTo(prevX, prevY);
      ctx.lineTo(currX, currY);
      ctx.strokeStyle = x;
      ctx.lineWidth = y;
      ctx.stroke();
      ctx.closePath();
  }
  
  function erase() {
      var m = confirm("Want to clear");
      if (m) {
          ctx.clearRect(0, 0, w, h);
          document.getElementById("canvasimg").style.display = "none";
      }
  }
  
  function save() {
      document.getElementById("canvasimg").style.border = "2px solid";
      var dataURL = canvas.toDataURL();
      document.getElementById("canvasimg").src = dataURL;
      document.getElementById("canvasimg").style.display = "inline";
  }
  
  function findxy(res, e) {
      if (res == 'down') {
          prevX = currX;
          prevY = currY;
          currX = e.clientX - canvas.offsetLeft;
          currY = e.clientY - canvas.offsetTop;
  
          flag = true;
          dot_flag = true;
          if (dot_flag) {
              ctx.beginPath();
              ctx.fillStyle = x;
              ctx.fillRect(currX, currY, 4, 4);
              ctx.closePath();
              dot_flag = false;
          }
      }
      if (res == 'up' || res == "out") {
          flag = false;
      }
      if (res == 'move') {
          if (flag) {
              prevX = currX;
              prevY = currY;
              currX = e.clientX - canvas.offsetLeft;
              currY = e.clientY - canvas.offsetTop;
              draw();
          }
      }
  }
  &lt;/script&gt;
  &lt;body onload="init()"&gt;
      &lt;canvas id="can" width="700" height="700" style="position:absolute;top:10%;left:10%;border:2px solid;"&gt;&lt;/canvas&gt;
      &lt;div style="position:absolute;top:12%;left:43%;"&gt;Choose Color&lt;/div&gt;
      &lt;div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;top:20%;left:43%;"&gt;Eraser&lt;/div&gt;
      &lt;div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"&gt;&lt;/div&gt;
      &lt;img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;"&gt;
      &lt;input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:90%;left:10%;"&gt;
      &lt;input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:90%;left:15%;"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>