MovingBall

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Moving Ball</title>
    <style>
        body {
            background-color: grey;
        }
        #field {
            margin: 30px;
            background-color: #7DF47D;
            border: 3px outset #2E792E;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="field"></canvas>
    <script>
        var canvasField = document.getElementById("field");
        var context = canvasField.getContext("2d");
        var xCoordinate = 10,
            yCoordinate = 10,
            xDirection = 1,
            yDirection = 1,
            radius = 8;
        setInterval(move, 10);

        function move() {
            context.beginPath();
            context.arc(xCoordinate, yCoordinate, radius*2, 0, 2 * Math.PI);
            context.fillStyle = "#7DF47D";
            context.fill();

            xCoordinate += xDirection;
            yCoordinate += yDirection;
            if (xCoordinate === radius || xCoordinate === canvasField.width-radius) {
                xDirection *= -1;
            }
            if (yCoordinate === radius || yCoordinate === canvasField.height-radius) {
                yDirection *= -1;
            }

            context.beginPath();
            context.arc(xCoordinate, yCoordinate, radius, 0, 2 * Math.PI);
            context.fillStyle = "#2E792E";
            context.fill();
            context.stroke();
        }
    </script>
</body>
</html>