make objects seem on the map at a sure distance based mostly on scale?

var pal = ["880015","5E000E","B7001C"];
var pTexture = [
0,0,0,0,1,0,0,0,
0,0,0,0,1,0,0,0,
2,2,2,2,1,2,2,2,
1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,
1,0,0,0,0,0,0,0,
1,2,2,2,2,2,2,2,
1,1,1,1,1,1,1,1
];
var textureW = 8;
var textureH = 8;
var ctx, canvasW, canvasH, centerH;

var qPI = 0.7853981633974483; // 45 levels
var p_angle = qPI*7; // FaceUP in Sport

var scaleX, scaleY, scaleLmt, camX, camY;

var management = {};

perform Predominant() {
    // Preliminary Scale
    scaleX = 1;
    scaleY = 1;
    scaleLmt = scaleX*300; // Limiter for testing
    
    camX = 15; //(textureW*2)+8;
    camY = 15; //-((textureH*2)+8);
    
    var canvas = doc.getElementById("display");
    canvasW = canvas.width;
    canvasH = canvas.peak;
    centerH = canvasH/2;
    ctx = canvas.getContext("2nd");
    ctx.fillStyle = "yellow"; //Background shade
    ctx.fillRect(0, 0, canvasW, canvasH); // Draw background    

    doc.physique.addEventListener("keydown", perform (e) {
        management[e.keyCode] = 1;
    });

    doc.physique.addEventListener("keyup", perform (e) {
        management[e.keyCode] = 0;
    });
    
    doc.physique.addEventListener('wheel', perform(e){
        if (e.deltaY < 0) {
            scaleX += 0.2;
            scaleY += 0.2;
        }
        if (e.deltaY > 0) {
            scaleX -= 0.2;
            scaleY -= 0.2;
        }
    });
    
    setInterval(Render,60);
}

perform Render() {
    var p, y2, x2;
    var cos = Math.cos(p_angle);
    var sin = Math.sin(p_angle);
    var z = 1;
    
    if (scaleX < 1) {
        scaleX = 1;
    }
    if (scaleY < 1) {
        scaleY = 1;
    }
    if (scaleX > scaleLmt) {
        scaleX = scaleLmt;
    }
    if (scaleY > scaleLmt) {
        scaleY = scaleLmt;
    }
    for (y = centerH; y < canvasH; y++) {
        for (x = 0;x < canvasW;x++) {
            y2 = ((canvasW - x) * cos - x * sin) / z;
            x2 = ((canvasW - x) * sin + x * cos) / z;
            if (z < 0) {
                x2 -= (camX/scaleX);
                y2 -= (camY/scaleY);
            } else {
                x2 += (camX/scaleX);
                y2 += (camY/scaleY);
            }
            if (y2 < 0) {
                y2 *= -1;
            }
            if (x2 < 0) {
                x2 *= -1;
            }
            y2 *= scaleY;
            x2 *= scaleX;

            x2 %= textureW;
            y2 %= textureH;
            
            p = pTexture[(Math.floor(x2) + Math.floor(y2) * textureW)];
            ctx.fillStyle = "#"+pal[p];
            ctx.fillRect(x,y, 1,1);
        }
        z++;
    }
    
    // CONTROL
    if (management["87"]) {
        /*W*/
        camX += Math.sin(p_angle + qPI) //* (scaleX*2);
        camY += Math.cos(p_angle + qPI) //* (scaleY*2);
    }
    if (management["83"]) {
        /*S*/
        camX -= Math.sin(p_angle + qPI) //* (scaleX*2);
        camY -= Math.cos(p_angle + qPI) //* (scaleY*2);
    }
    if (management["65"]) {
        /*A*/
        p_angle -= 0.1;
    }
    if (management["68"]) {
        /*D*/
        p_angle += 0.1;
    }
    if (management["38"]) {
        /*ArrowUp*/
        scaleY += 2;
    }
    if (management["40"]) {
        /*ArrowDown*/
        scaleY -= 2;
    }
    if (management["37"]) {
        /*ArrowLeft*/
        scaleX += 2;
    }
    if (management["39"]) {
        /*ArrowRight*/
        scaleX -= 2;
    }
}
window.addEventListener("load", perform(){
    Predominant()
});

<canvas id="display" width="320", peak="180"></canvas>
<pre>Ahead: W | Again: S | Rotate Left: A | Rotate Proper: D
WheelUp: Additional (Scale) | WheelDown : Nearer (Scale)
ArrowUP/ArrowDow : Additional (ScaleY)
ArrowLeft/ArrowRight : Additional (ScaleX)</pre>