rectangle progress

by jakelauer

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

canvas
{
    padding: 40px;
}

JavaScript

var outerRect = {
    x: 0,
    y: 0,
    width: 200,
    height: 200
}

var innerRect = {
    x: 15,
    y: 15,
    width: 170,
    height: 170
};

Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

function getRectPointFromPct(rect, pct){
    var rectC = (rect.width + rect.height) * 2;
    var ptAlongC = rectC * pct;
    
    var sideLimits = [
        rect.width, // side 1
        rect.width + rect.height, // side 2,
        rect.width * 2 + rect.height, // side 3,
        rectC // side 4
    ];
    var lastLimit = -1;
    var sideContainingPt = 0;
    
    while(ptAlongC > lastLimit && sideContainingPt < 4){
        lastLimit = sideLimits[sideContainingPt];
        sideContainingPt++;
    }
    
    var relativeX = -1, relativeY = -1;
    switch(sideContainingPt){
        case 1:
            relativeX = ptAlongC;
            relativeY = 0;
            break;
        
        case 2:
            relativeX = rect.width;
            relativeY = ptAlongC - sideLimits[0];
            break;
            
        case 3:
            relativeX = rect.width - (ptAlongC - sideLimits[1]);
            relativeY = rect.height;
            break;
            
        case 4:
            relativeX = 0;
            relativeY = rect.height - (ptAlongC - sideLimits[2]);
            break;
            
    };
    
    return {
        x: rect.x + relativeX,
        y: rect.y + relativeY
    };
};

var limitPtToRect = function(coords, rect){
    var fixedCoords = { x: coords.x, y: coords.y};
    // If the coordinates exceed the rect's bounds, use the rect
    if(coords.x <= rect.x){
        fixedCoords.x = rect.x;
    }
    else if(coords.x >= (rect.x + rect.width)){        
        fixedCoords.x = rect.x + rect.width;
    }
    
    if(coords.y <= rect.y){
        fixedCoords.y = rect.y;
    }
    else if(coords.y >=...