canvas drawing fun

by J. Jones

HTML

<canvas id="counter" width="500" height="500"></canvas>

CSS

canvas {
    display: block;border:1px solid black;
}

JavaScript

var xStart,
    xEnd,
    yStart,
    yEnd,
    paint,
    ctx;
$(document).ready(function (){
    
    if (typeof FlashCanvas != "undefined") {
        FlashCanvas.initElement($('canvas')[0]);
    }
    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 = 5 - Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/10;
                   // if(lineThickness < 1){
                   //     lineThickness = 1;   
                   // }
                    
                   lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5;
                   
                   
                   
                   if(lineThickness > 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'){
               ...