title: drawing a smooth line on html5 canvas for mobile app using jquery mobile
body: <p>I am trying to draw on canvas, like drawing using pencil tool in the paint using jquery mobile.</p>
  
  <p>I searched for many links and most of them were for the desktop, i tried to implement the same logic for the mobile app, i am able to obtain only the click events but not able to draw the line on the canvas.</p>
  
  <p>This is what i was trying to implement on the mobile <a href="http://jsfiddle.net/loktar/dQppK/23/" rel="nofollow">http://jsfiddle.net/loktar/dQppK/23/</a></p>
  
  <p>This is my code</p>
  
  <pre><code>$(document).on(
          'pageshow',
          '#canvaspage',
          function() {
              var painting = false;
              var c = document.getElementById("myCanvas");
              var ctx = c.getContext("2d");
              // ctx.fillStyle="#FF0000";
              // ctx.fillRect(0,0,150,75);
              // ctx.drawImage(icons-18-black.png)
  
              ctx.canvas.width = window.innerWidth * 0.8;
              ctx.canvas.height = window.innerHeight * 0.8;
  
              var imageObj = new Image();
  
              imageObj.onload = function() {
                  ctx.drawImage(imageObj, 0, 0, ctx.canvas.width * 0.8,
                          ctx.canvas.height * 0.7);
              };
              imageObj.src = 'Image.png';
  
  //          c.addEventListener('touchstart', function(e) {
              $("#myCanvas").on("touchstart",function(e){
                  painting = true;
                  e.preventDefault();
  
                  ctx.fillStyle = "#FF0000";
                  lastX = e.pageX - this.offsetLeft;
                  lastY = e.pageY - this.offsetTop;
  
              });
  
  //          c.addEventListener('touchend', function(e) {
              $("#myCanvas").on("touchend",function(e){
                  painting = false;
  
              });
  
  //          c.addEventListener('touchmove', function(e) {
  
              $("#myCanvas").on("touchmove",function(e){  
  
                    if (painting) {
  
                          mouseX = e.pageX - this.offsetLeft;
                          mouseY = e.pageY - this.offsetTop;
  
                          // find all points between        
                          var x1 = mouseX,
                              x2 = lastX,
                              y1 = mouseY,
                              y2 = lastY;
  
  
                          var steep = (Math.abs(y2 - y1) &gt; Math.abs(x2 - x1));
                          if (steep){
                              var x = x1;
                              x1 = y1;
                              y1 = x;
  
                              var y = y2;
                              y2 = x2;
                              x2 = y;
                          }
                          if (x1 &gt; x2) {
                              var x = x1;
                              x1 = x2;
                              x2 = x;
  
                              var y = y1;
                              y1 = y2;
                              y2 = y;
                          }
  
                          var dx = x2 - x1,
                              dy = Math.abs(y2 - y1),
                              error = 0,
                              de = dy / dx,
                              yStep = -1,
                              y = y1;
  
                          if (y1 &lt; y2) {
                              yStep = 1;
                          }
  
                          lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
                          if(lineThickness &lt; 1){
                              lineThickness = 1;   
                          }
                          alert(painting +" " +x1 +" "+x2);
                          for (var x = x1; x &lt; x2; x++) {
  
  //                          alert(x +" "+ y +" "+ lineThickness);
                              if (steep) {
                                  ctx.fillRect(y, x, lineThickness , lineThickness );
                              } else {
                                  ctx.fillRect(x, y, lineThickness , lineThickness );
                              }
                              alert(steep);
                              error += de;
                              if (error &gt;= 0.5) {
                                  y += yStep;
                                  error -= 1.0;
                              }
                          }
  
  
  
                          lastX = mouseX;
                          lastY = mouseY;
  
                      }
  
  
  
  //              ctx.fillRect(0, 0, 150, 75);
                  e.preventDefault();
              }, false);
          });
  </code></pre>
  
  <p>In the above code i am able to obtain all the touch events but the unable to draw the line. </p>
  
  <p>How can i draw the lines on the canvas??..</p>
  
  <p>Thanks:)</p>