scope - Javascript Variable not passing through ocanvas function and for loop

Question

I'm having an issue with a variable not being passed through an ocanvas function. it appears that the variable is changing inside the function but isn't making it outside the function. here is my code:

                sonicSpeed2 = 0;
                sonicState2 = 0;

                canvas.bind("keypress", function () {
                    var keys = canvas.keyboard.getKeysDown();
                    var x;

                    sonicSpeed2 = 4;

                    for (x = keys.length; x > 0; x--) {
                        if (keys[x-1] == 16 && keys.length > 1) {
                            sonicSpeed2 = 15;
                            sonicState2 = 2;
                        }
                        if (keys[x-1] == 65) {
                            sonicState2 = 1;
                            sonicDirection2a = false;
                        }
                        if (keys[x-1] == 68) {
                            sonicState2 = 1;
                            sonicDirection2a = true;
                        }
                        if (keys[x-1] == 87) {
                            sonicState2 = 1;
                            sonicDirection2b = false;
                        }
                        if (keys[x-1] == 83) {
                            sonicState2 = 1;
                            sonicDirection2b = true;
                        }
                    }
                });

                if (sonicDirection2a == false) {
                    nullObject2.x -= sonicSpeed2;
                }
                else if (sonicDirection2a == true) {
                    nullObject2.x += sonicSpeed2;
                }

                if (sonicDirection2b == false) {
                    nullObject2.y -= sonicSpeed2;
                }
                else if (sonicDirection2b == true) {
                    nullObject2.y += sonicSpeed2;
                }

Answer 1

The event handler is executed at an undetermined time in the future. Binding the event handler, which is what you are doing with canvas.bind("keypress", ...) does not executed the function. What comes after that is executed immediately.

If you want to do something in response to the event it has to be in or executed from the event handler.

See Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference for reference.