Canvas объект выходит за пределы поля
 

Здравствуйте! Подскажите, пожалуйста, что сделать, чтобы объект не выходил за пределы canvas?

window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 
 
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
 
var rec = new Object();
rec.x = 0;
rec.y = 0;
rec.moveright = function(){ rec.x++;}
rec.moveleft = function(){ rec.x--;}
rec.moveup = function(){ rec.y--;}
rec.movedown = function(){ rec.y++;}
rec.draw = function() {
    
    ctx.beginPath();
    ctx.clearRect(0,0,500,500);
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(rec.x,rec.y,150,75);
    ctx.closePath();
}

 
document.onkeydown = function(e) {
//alert(e.keyCode);
if (e.keyCode == "37")
{
    
    rec.moveleft();
    rec.draw();
}

 
if (e.keyCode == "38")
{
	
	rec.moveup();
	rec.draw();
   
}
 
if (e.keyCode == "39")
{
	
    rec.moveright();
    rec.draw();
   
}
 
if (e.keyCode == "40")
{
	
    rec.movedown();
    rec.draw();
  
}
}


};

То и сделать, не выпускать за пределы.

:) не выпускала бы, если б знала как :) может подскажете?

в методах move*** проверять, что объект не выскочит за пределы. Если выскочит, не менять икс или игрек.

Спасибо большое за помощь!

Допустим ширина канваса 500

var w=500;

Откуда-то валится 600 в координату Y. Тогда на выводе:

y = Math.min(y,w);

Таким образом y никогда не будет больше w. Если "объект" больше пиксела, то из w еще надо вычесть его ширину.

obj.y = Math.min(obj.y,w-obj.w);

Наверно так, я с арифметикой не дружу.

Огромное спасибо за помощь!

e.code в IE не поддерживается