How do I move an element around on a canvas element?

Question

I have a code that is moving an object in jQuery, but when I press the arrows to move the object up and down the whole page is moving . (scrolling up/down) How can I specify that only the object in the canvas should move ? I really don't know how to explain my problem better ...

Could do with some code but are you watching for keypress using jQuery. If so, you then need to prevent default to stop the default action of the button happening on the page. — Gareth Hopkins, Nov 28 '14 at 23:57
Yes, I am doing exactly what you said. What would that code be ? — Bogdan, Nov 28 '14 at 23:58
SO isn't a free freelance service. Please post what you've tried and provide a demo if possible. — isherwood, Nov 29 '14 at 00:04

score 2 · Answer 1 · edited May 23 '17 at 12:20

To expand on the comment I made, here is some code to watch for document arrow key presses..

$(document).keypress(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret) 
});

Credit to @Sygmoral - Binding arrow keys in JS/jQuery

How do I move an element around on a canvas element?

1 Answers1