Canvas -> animation

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #can1
        {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="can1" width="500" height="550">
    </canvas>
</body>
    <script>
        var ctx = document.getElementById('can1').getContext('2d');

        var x = 50;
        var y = 50;
        var directionX = 1;
        var directionY = 1;

        window.setInterval(function() {
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, 500, 550);
            if (x === 495 || x === 5) {
                directionX *= -1;
            }
            if (y === 545 || y === 5) {
                directionY *= -1;
            }
                ctx.beginPath();
                ctx.fillStyle = "red";
                ctx.arc(x, y, 5, 0, Math.PI * 2, false);
                ctx.fill();
                ctx.stroke();
                x += directionX;
                y += directionY;
        }, 5);

    </script>
</html>