Hey,

I have a basic circle which I can zoom in and out of, as well as scroll around. The problem how ever is trying to keep the the center point of the canvas (the red dot), within the circle.

The problem lies in two places, one when i'm scrolling around i should be able to have the red dot reach the perimeter of the circle. The second issue is zooming out will cause the red dot to be outside the circle (if the camera was offset from it's initial starting point).

Here is an example of the code: http://jsfiddle.net/nf2s5o38/

The maths I used to fix the problems are shown below.

When zooming in and out this function occurs:

function zoomObj(e){
    var delta       = e.wheelDelta,
        mousePos    = {};
        mousePos.x  = e.pagex;
        mousePos.y  = e.pageY;
    var range = zoom.percentVal * zoom.modifier;

    if(delta == 120){ 	//scroll in
	var endVal = zoom.position + range;
    } else {            //scroll out
	var endVal = zoom.position - range;
    }  

    zoom.position = endVal;	   
    
    //reposition camera to keep red dot inside the circle [currently not working correctly]
    camera.offsetX /= zoom.percent;
    camera.offsetY /= zoom.percent;
    zoom.percent = (zoom.position/zoom.range) * 100;		
    camera.offsetX *= zoom.percent;
    camera.offsetY *= zoom.percent;   
}

When scrolling around the canvas this function is used to keep the camera within the boundries:

function fixCamera(camX,camY){    
    var centerX        = canvas.width/2;  //red dot x
    var centerY        = canvas.height/2; //red dot y
    var X              = centerX - camX;  //camX = camera offsetX
    var Y              = centerY - camY;  //camy = camera offsetY
    var distance       = Math.sqrt( X*X + Y*Y );
    var radius         = obj.radius/100 * zoom.percent;
    if(distance > radius){
           return false;
    } else { 
           return true;   
    }  
}

For this kind of issue, you might want to look into basic circle based collision detection. First, find the center point of the circle. Then do something like this:

if(sqrt(pow((dotX-circleOffsetX), 2)+pow((dotY-circleOffsetY), 2)) < circleRadius)
{
//is inside the circle
}

This finds the dot's position relative to the center of the circle ((dotX-circleOffsetX) and (dotY-circleOffsetY)) then uses a basic distance formula to check if the distance from the center of the circle is less than the radius of the circle. If the dot isn't inside the circle, all you have to do is move it back inside the circle.

Hmm i added that idea to this example: http://jsfiddle.net/q6pxmovp/ (Line number 48)

But now the circle doesn't move when trying to scroll.

This is the updated function:

function fixCamera(camX,camY){    
    var dotX           = canvas.width/2; //sprite location x
    var dotY           = canvas.height/2; //sprite location y
    var radius         = obj.radius/100 * zoom.percent; 
    var X              = camX - dotX; //circle center relative to red dot on X axis
    var Y              = camY - dotY; //circle center relative to red dot on Y axis
    
    if(Math.sqrt( Math.pow((dotX-X),2) + Math.pow((dotY-Y), 2) ) < radius){
        return true; //in the circle free to move
    } else {
        return false; //out of the circle not free to move
    }
}

Did i make a mistake?

On a side note - not everyone has a mouse wheel. Always a good idea to bind alternate keys.

On a side note - not everyone has a mouse wheel. Always a good idea to bind alternate keys.

I already have alternatives up for the main code, but a fiddle is just a quick implementation to demonstrate. But lets not get distracted :P