html如何将画布移到最右边,HTML5画布如何给它一个边界？

对于一个学校任务我正在制作一个风筝游戏..

我是一个总的javascript noob，我真的需要一些帮助。

所以我正处在按下箭头按钮来移动图像的时候。

现在的问题是，我的形象可以走出画布，我不希望它..

我真的没有想法如何做到这一点，我已经尝试了多个教程，但它似乎并没有工作。

window.onload = function() {

var canvas = document.getElementById("game");

window.addEventListener('keydown', keyDown, true);

var context = canvas.getContext("2d");

var kite = document.getElementById("kite");

var kite = new Image ();

kite.src = "kite.png";

context.drawImage(kite, 250, 300, 300, 150);

var x = 250;

var y = 300;

function keyDown(e){

// up

if (e.keyCode == 38) {

clearCanvas();

y = y - 3;

context.drawImage(kite, x, y, 300, 150);

}

// down

if (e.keyCode == 40) {

clearCanvas();

y = y + 3;

context.drawImage(kite, x, y, 300, 150);

}

// left

if (e.keyCode == 37) {

clearCanvas();

x = x - 10;

context.drawImage(kite, x, y, 300, 150);

}

// right

if (e.keyCode == 39) {

clearCanvas();

x = x + 10;

context.drawImage(kite, x, y, 300, 150);

}

}

function clearCanvas() {

canvas.width = canvas.width;

}

};如果有人能帮助我，我真的很感激它：D