S2JS - Responding to keys : Staying on-screen

I've moved some of the mundane lines of code in the preface and postscript areas, just to tidy things up.

What do you think you'd need to do to keep the cat visible at all times?

To start simple, try just keeping it from going too far to the left

<head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); var x_pos = 0; var y_pos = 0; var MyImg = new Image(); MyImg.src = "http://s2js.com/img/etc/cat_grumpy.png"; function MyTimer () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); ctx.drawImage(MyImg, x_pos, y_pos); } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {x_pos = x_pos - 10;} // left if (MyEvent.keyCode == 38) {y_pos = y_pos - 10;} // up if (MyEvent.keyCode == 39) {x_pos = x_pos + 10;} // right if (MyEvent.keyCode == 40) {y_pos = y_pos + 10;} // down } setInterval(MyTimer, 40); addEventListener("keydown", MyKeyDownHandler); </script> </body> </html>