How to make an object move using html and javascript

HOW TO MAKE AN OBJECT MOVE USING HTML AND JAVASCRIPT

This lesson will be about learning how to make an object inside of a canvas move by pressing the arrows on the keypad.

This code below will show you the movement of the object and how it will stop at the end of each side of the canvas.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Moving an Object</title>
</head>
<body>
    <script>
        var canvas = document.createElement("canvas");
        b = canvas.getContext("2d");

        canvas.width = 400;
        canvas.height = 400;

        document.body.appendChild(canvas);

        b.fillStyle = "black";
        b.fillRect(0, 0, canvas.width, canvas.height);

        var posX = 200;
        posY = 200;
        dx = 0;
        dy = 0;

        setInterval(function () {
            b.fillStyle = "black";
            b.fillRect(0, 0, canvas.width, canvas.height);
            posX += dx;
            posY += dy;

            if (posX > 390) {
                dx = 0;
                posX = 390;
            }

            if (posX < 0) {
                dx = 0;
                posX = 0;
            }

            if (posY > 390) {
                dy = 0;
                posY = 390;
            }

            if (posY < 0) {
                dy = 0;
                posY = 0;
            }

        b.fillStyle = "white";
        b.fillRect(posX, posY, 10, 10);
        }, 20)

        window.addEventListener("keydown", press001, true);
        function press001(event) {
            switch (event.keyCode) {
                case 37:
                    dx = -1;
                    dy = 0;
                    break;

                case 38:
                    dx = 0;
                    dy = -1;
                    break;

                case 39:
                    dx = 1;
                    dy = 0;
                    break;

                case 40:
                    dx = 0;
                    dy = 1;
                    break;

                case 32:
                    dx = 0;
                    dy = 0;
                    break;
            }
        }
    </script>
</body>
</html>

Here is a video of the above code.

Other Topics:

Crosswords- General Area
Human Body Facts
Binary Digits