When Zoomed the canvas and then pan, now if I am trying to drag the objects within canvas then not able to do so. But canvas is panning only

Question

1) Without scaling / zooming I am able to pan canvas and able to drag images.

2) Able to drag images within canvas if scaling / zooming.

3) But When I pan the canvas after zooming then if I am trying to drag images then just canvas is panning. Not able to drag the images

In imagesHitTests(x, y) and imagesHitTests2(x, y) we are finding the hits on images drawn on main svg file.

There are points panX and panY. How should I solve this?

Following is my code:

var dataJSON = data || [];
var dataJSON2 = data2 || [];
window.onload = function(){       
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");        

    var canvasOffset=$("#myCanvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var lastX=0;
    var lastY=0;
    var panX=0;
    var panY=0;
    var dragging=[];
    var dragging2=[];
    var isDown=false;

    function loadImages(sources, callback){
      var images = {};
      var loadImages = 0;
      var numImages = 0;
      //get num of sources
      for(var i in sources){            
        numImages++;
      }
      for(var i in sources){            
        images[i] = new Image();
        images[i].onload = function(){
          if(++loadImages >= numImages){
            callback(images);
          }
        };
        images[i].src = sources[i];            
      }
    }

    var sources = {darthVader : '/static/images/orange1.png', yoda : '/static/images/green1.png'};


    // load the tiger svg file
    var svgfiles = ["/static/images/awesome_tiger.svg"];       

    function draw(scaleValue){ 
      ctx.clearRect(0,0,canvas.width,canvas.height);    
      ctx.save();
      ctx.drawSvg(svgfiles[0],panX,panY,400*scaleValue, 400*scaleValue);

      loadImages(sources, function(images){     
        ctx.scale(scaleValue, scaleValue);
        for(var i = 0, pos; pos = dataJSON[i]; i++) {            
          ctx.drawImage(images.darthVader, parseInt(parseInt(pos.x) + parseInt(panX)), parseInt(parseInt(pos.y) + parseInt(panY)), 20/scaleValue, 20/scaleValue);               
        }
        for(var i = 0, pos; pos = dataJSON2[i]; i++) {            
          ctx.drawImage(images.yoda, parseInt(parseInt(pos.x) + parseInt(panX)), parseInt(parseInt(pos.y) + parseInt(panY)), 20/scaleValue, 20/scaleValue);              
        }
        ctx.restore();
      });

    };
    var scaleValue = 1;
    var scaleMultiplier = 0.8;
    draw(scaleValue);
    var startDragOffset = {};
    var mouseDown = false;          
    // add button event listeners
    document.getElementById("plus").addEventListener("click", function(){           
        scaleValue /= scaleMultiplier;  
        //checkboxZoomPan();            
        draw(scaleValue);               
    }, false);
     document.getElementById("minus").addEventListener("click", function(){
        scaleValue *= scaleMultiplier;
        //checkboxZoomPan();            
        draw(scaleValue);       
    }, false);
    document.getElementById("original_size").addEventListener("click", function(){
        scaleValue = 1;
        //checkboxZoomPan();            
        draw(scaleValue);   
    }, false);


    // create an array of any "hit" colored-images
    function imagesHitTests(x,y){
      // adjust for panning
      x-=panX;
      y-=panY;
      // create var to hold any hits
      var hits=[];
      // hit-test each image
      // add hits to hits[]
      loadImages(sources, function(images){
        for(var i = 0, pos; pos = dataJSON[i]; i++) {              
           if(x >= parseInt(parseInt(pos.x) * scaleValue) && x <= parseInt(parseInt(pos.x) * scaleValue + parseInt(20)) && y >= parseInt(parseInt(pos.y) * scaleValue) && y <= parseInt(parseInt(pos.y) * scaleValue + parseInt(20))){  
            hits.push(i);              
          }              
        }            
      });          
      return(hits);
    }

    function imagesHitTests2(x,y){
      // adjust for panning
      x-=panX;
      y-=panY;
      // create var to hold any hits
      var hits2=[];
      // hit-test each image
      // add hits to hits[]
      loadImages(sources, function(images){            
        for(var i = 0, pos; pos = dataJSON2[i]; i++) {
           if(x >= parseInt(parseInt(pos.x) * scaleValue) && x <= parseInt(parseInt(pos.x) * scaleValue + parseInt(20)) && y >= parseInt(parseInt(pos.y) * scaleValue) && y <= parseInt(parseInt(pos.y) * scaleValue + parseInt(20))){  
            hits2.push(i);                
          }              
        }            
      });          
      return(hits2);
    }

    function handleMouseDown(e){
      // get mouse coordinates
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // set the starting drag position
      lastX=mouseX;
      lastY=mouseY;
      // test if we're over any of the images
      dragging=imagesHitTests(mouseX,mouseY);
      dragging2=imagesHitTests2(mouseX,mouseY);
      // set the dragging flag

      isDown=true;
    }

    function handleMouseUp(e){
      // clear the dragging flag
      isDown=false;
    }

    function handleMouseMove(e){
      // if we're not dragging, exit
      if(!isDown){
        return;
      }

      //get mouse coordinates
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // calc how much the mouse has moved since we were last here
      var dx=mouseX-lastX;
      var dy=mouseY-lastY;

      // set the lastXY for next time we're here
      lastX=mouseX;
      lastY=mouseY;

      // handle drags/pans
      if(dragging.length>0){           
        // we're dragging images
        // move all affected images by how much the mouse has moved            
        for(var i = 0, pos; pos = dataJSON[dragging[i]]; i++) {              
          pos.x = parseInt(pos.x) + parseInt(dx);              
          pos.y = parseInt(pos.y) + parseInt(dy);              
        }
      }
      else if(dragging2.length>0){            
        for(var i = 0, pos1; pos1 = dataJSON2[dragging2[i]]; i++) {              
          pos1.x = parseInt(pos1.x) + parseInt(dx);              
          pos1.y = parseInt(pos1.y) + parseInt(dy);
        }            
      }
      else{
        // we're panning the tiger
        // set the panXY by how much the mouse has moved
        panX+=dx;
        panY+=dy;
      }
      draw(scaleValue);
    }

    // use jQuery to handle mouse events
    $("#myCanvas").mousedown(function(e){handleMouseDown(e);});
    $("#myCanvas").mousemove(function(e){handleMouseMove(e);});
    $("#myCanvas").mouseup(function(e){handleMouseUp(e);});   
  }

Answer 1

If I understand correctly you must change coordinates and width\\height of image on your scale

You want to do something like this - http://drag.com.hostinghood.com/ ?