Moving Circle

var movingCircle = (function () {
    var canvas = document.getElementById("main-canvas").getContext("2d");
    var circle = new Circle(111, 150);
    var change = new Change(1, 1);

    function Circle(baseLeft, baseTop) {
        this.baseLeft = baseLeft;
        this.baseTop = baseTop;
    }

    function Change(left, top) {
        this.left = left;
        this.top = top;
    }

    function drawField() {
        canvas.beginPath();
        canvas.fillStyle = "#88DDDD";
        canvas.strokeStyle = "#002222";
        canvas.moveTo(100, 100);
        canvas.lineTo(100, 600);
        canvas.lineTo(800, 600);
        canvas.lineTo(800, 100);
        canvas.lineTo(100, 100);
        canvas.fill();
        canvas.stroke();

    }
    function drawCircle() {
        var radius = 10;
        canvas.beginPath();
        canvas.arc(circle.baseLeft, circle.baseTop, radius, 0, 2 * Math.PI, false);
        canvas.fillStyle = 'green';
        canvas.fill();
        canvas.lineWidth = 1;
        canvas.strokeStyle = '#003300';
        canvas.stroke();
    }
    function render() {
        drawField();
        drawCircle();
        updatePosition();
        if (circle.baseTop == 110) {
            change.top *= -1;
        }
        if (circle.baseTop == 590) {
            change.top *= -1;
        }
        if (circle.baseLeft == 110) {
            change.left *= -1;
        }
        if (circle.baseLeft == 790) {
            change.left *= -1;
        }
    }
    function updatePosition() {
        circle.baseLeft += change.left;
        circle.baseTop += change.top;
    }

    function play() {
        setInterval(render, 20);
        }
    return {
        play: play
    }
})();