调整大小并移动画布内容html5

Question

我已在画布中测量线条工具。我已经可以使用getImageData（）和putImageData（）来保存它。

现在我唯一和最后一个问题是如何调整线条，甚至移动它。

目前，我有这个代码：

 $("#myCanvas").mousedown(function(event){
        event.preventDefault();
        $(this).addClass("mouseDown");

        if(trigger = "1"){
            $('.draggable').draggable( "disable" );
        }else{
            $('.draggable').draggable("enable");
        }       

        var angx=startX;
        var angy=startY;
        startX=(event.clientX-$(canvas).offset().left)*(parseInt($(canvas).attr("width"))/parseInt($(canvas).css("width")));
        startY=(event.clientY-$(canvas).offset().top)*(parseInt($(canvas).attr("height"))/parseInt($(canvas).css("height")));
        //alert(startX + " : " + startY );

        tmp = ctx.getImageData(0,0,canvas.width, canvas.height);                                    

        $("#myCanvas").bind('mousemove', function(e){       
        endX=(e.clientX-$(canvas).offset().left)*(parseInt($(canvas).attr("width"))/parseInt($(canvas).css("width")));      
        endY=(e.clientY-$(canvas).offset().top)*(parseInt($(canvas).attr("height"))/parseInt($(canvas).css("height"))); 

        drawLine(startX, startY, endX, endY);   

        });             
 }).mouseup(function(data){
        totalOffsetX = 0, totalOffsetY = 0;     
        $(this).removeClass("mouseDown");
        if(trigger = "1"){
            $('.draggable').draggable( "disable" );
        }else{
        $('.draggable').draggable("enable");
            }   
        $(this).unbind('mousemove');    
        tmp = ctx.getImageData(0,0,canvas.width, canvas.height);    
});                                 


var Calculate={
    lineLength:function(x1, y1, x2,y2){    
        console.log(x1 + ", "+ y1 +", " + x2 + ", " + y2);
        return Math.sqrt(Math.pow(x2*dry-x1*dry, 2)+Math.pow(y2*drx-y1*drx, 2));
    }
}                                                                           

function drawLine(startX, startY, endX, endY){                                          
    ctx.clearRect(0, 0, canvas.width, canvas.height);                                           
    ctx.putImageData(tmp, 0, 0);
    ctx.beginPath();                                                                                        
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.fillStyle="#A9F5F2";
    ctx.font='12pt Calibri';
    //ctx.fillText("Start X: " + startX + " " + " Y: " + startY , startX, startY-10);
    //ctx.fillText("End X: " + endX + " " + " Y: " + endY, endX, endY+10);
    var px =Calculate.lineLength(startX, startY, endX, endY).toFixed(1);    
    ctx.fillText(Math.round(px/1)+"px" ,endX,endY);     
    ctx.strokeStyle = '#00FFFF';                                                                                
    ctx.stroke();
    ctx.closePath();                                            

        }