Generate random X and Y outside a box

I want to generate random X and Y (red rect) positions ouside a box (gray rect)

My code is working, in the bad way. The positions are generated only IN the box.

I tried to write the opposite conditions but my code crash when I do that.

Here is the fidle: http://ift.tt/2goIiXn

js code:

function rbn(min, max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

var canvas = document.querySelector('canvas');
canvas.height = 900;
canvas.width = 1700;
var context = canvas.getContext('2d');

function drawBigRect() {
    context.strokeStyle = "rgb(210, 215, 211)";
    context.lineWidth = 8;
    context.strokeRect((canvas.width - 500) / 2, (canvas.height - 500) / 2, 500, 500); // debutx: 600, debuty:200, finx: 1100, finy: 700
}
// generating X and Y positions
function squareParticle() {
    var x;
    var y;
    x = rbn(25, canvas.width - 25);
    y = rbn(25, canvas.height - 25); 

   while ((600 >= x + 25)     
 ||(600 + 500 <= x) 
 || (200 >= y + 25) 
 || (200 + 500 <= y))   
{    
   x = rbn(0, canvas.width - 25);
   y = rbn(0, canvas.height - 25); 
}
    return {
        x: x,
        y: y
    };
}

var truc = {
    x: squareParticle().x,
    y: squareParticle().y
};

console.log(truc.x, truc.y);

function main() {

    context.clearRect(0,0,1700,900);

    drawBigRect();

    context.fillStyle = "red";
    context.fillRect(truc.x, truc.y, 25, 25),

    requestAnimationFrame(main);

}

main();

How to generate positions OUTISIDE the gray rect ?

Thanks :) !