Здравствуйте! Подскажите, пожалуйста, что сделать, чтобы объект не выходил за пределы 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();
}
}
};