S2JS - Responding to keys : Preventing unwanted scrolling

Depending on your browser and screen size, you may have noticed that in addition to the cat responding to your up and down keys, the browser window is scrolling at the same time.

This is because the browser also gets told about the key event.

Fortunately there's an easy way to tell the browser "don't worry, I've got this event handled". Just include this line in your handler:

function MyKeyDownHandler (MyEvent) { : : MyEvent.preventDefault(); }

<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 > 0) {x_pos = x_pos - 10;} // left if (MyEvent.keyCode == 38 && y_pos > 0) {y_pos = y_pos - 10;} // up if (MyEvent.keyCode == 39 && x_pos+MyImg.width < myCanvas.width) {x_pos = x_pos + 10;} // right if (MyEvent.keyCode == 40 && y_pos+MyImg.height < myCanvas.height) {y_pos = y_pos + 10;} // down MyEvent.preventDefault() } setInterval(MyTimer, 40); addEventListener("keydown", MyKeyDownHandler); </script> </body> </html>