title: Implementing smooth sketching and drawing on the <canvas> element
body: <p>I am trying to create a drawing area with canvas. I am having trouble with making the lines look smooth when drawing curves and I also have changing line thickness in my algorithm which looks bad as well because the size jumps to much as well and you can see where the size changed. I did find this <a href="https://stackoverflow.com/questions/5076622/iphone-smooth-sketch-drawing-algorithm">link on stackoverflow</a> but this was for a native iPhone app and I can't figure it out. </p>
  
  <p>Here is my current JS code. and Here is it running <a href="http://jsfiddle.net/PbPBS/" rel="noreferrer">on jsFiddle</a></p>
  
  <pre><code>var xStart,
  xEnd,
  yStart,
  yEnd,
  paint,
  ctx;
  $(document).ready(function (){
  
     ctx = $('canvas')[0].getContext("2d");
     ctx.strokeStyle = '#000';
     ctx.lineJoin="round";
     ctx.lineCap="round";
     ctx.lineWidth = 1;
  
  
     $('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
          var orig = e.originalEvent;
  
          if(e.type == 'mousedown'){
              e.preventDefault(); e.stopPropagation();
  
              xStart = e.clientX - $(this).offset().left;
              yStart = e.clientY - $(this).offset().top;
              xEnd = xStart;
              yEnd = yStart;
  
              paint = true;
              draw(e.type);
  
          }else if(e.type == 'mousemove'){
              if(paint==true){
                  xEnd = e.clientX - $(this).offset().left;
                  yEnd = e.clientY - $(this).offset().top;
  
  
                 lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5;
  
                 if(lineThickness &gt; 10){
                      lineThickness = 10;   
                 }
  
                  ctx.lineWidth = lineThickness;
                  draw(e.type);
              }
          }else if(e.type == 'mouseup'){
              paint = false;
          }else if(e.type == 'mouseleave'){
              paint = false;
          }else if(e.type == 'touchstart'){
              if(orig.touches.length == 1){
                  e.preventDefault(); e.stopPropagation();
  
                  xStart = orig.changedTouches[0].pageX - $(this).offset().left;
                  yStart = orig.changedTouches[0].pageY - $(this).offset().top;
                  xEnd = xStart;
                  yEnd = yStart; 
  
                  paint = true;
                  draw(e.type);
              }
          }else if(e.type == 'touchmove'){
              if(orig.touches.length == 1){
                  if(paint==true){
                      xEnd = orig.changedTouches[0].pageX - $(this).offset().left;
                      yEnd = orig.changedTouches[0].pageY - $(this).offset().top;
  
  
                              lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/6;
                         if(lineThickness &gt; 10){
                            lineThickness = 10;   
                         }
  
  
                        ctx.lineWidth = lineThickness;
  
  
                      draw(e.type);
                  }
              }
          }else if(e.type == 'touchend'){
              paint = false;
          }
  
        });
      });
  
  
      function draw(event){
  
      if(event == 'mousedown'){
          ctx.beginPath();
          ctx.moveTo(xStart, yStart);
          ctx.lineTo(xEnd, yEnd);
          ctx.stroke();
      }else if(event == 'mousemove'){
          ctx.beginPath();
          ctx.moveTo(xStart, yStart);
          ctx.lineTo(xEnd, yEnd);
          ctx.stroke();
      }else if(event == 'touchstart'){
          ctx.beginPath();
          ctx.moveTo(xStart, yStart);
          ctx.lineTo(xEnd, yEnd);
          ctx.stroke();
      }else if(event == 'touchmove'){
          ctx.beginPath();
          ctx.moveTo(xStart, yStart);
          ctx.lineTo(xEnd, yEnd);
          ctx.stroke();
      }
      xStart = xEnd;
      yStart = yEnd;                  
  }
  </code></pre>
  
  <p>Thank you all in advance. </p>
  
  <p>This is what it looks like right now if you draw. <img src="https://i.stack.imgur.com/UnSkj.png" alt="current (jagged) implementation"> </p>
  
  <p>... and this is what I would love to achieve: </p>
  
  <p><img src="https://i.stack.imgur.com/UL1UP.png" alt="smooth brushstrokes"></p>