Change the direction of an animation canvas element when it reaches the width of the canvas

Question

I am animating a rectangle through a canvas element using js. I want to change the direction of the animation when the rectangle reaches the width of the canvas, but cannot work out the logic when it rotates once, but then goes right again, essentially sticking it to the width of the canvas.

Please check out the code below for a clearer picture:

function startGame() {
   game.start();
   game.createSquare('red', 100, 10, 10, 10);
}

function updateGame() {
    game.clear();
    //lines below are causing issues
    if(game.x < game.canvas.width){
        game.x++;
    } else {
        game.x--; 
    }
    game.update();
}

var game = {
   //create the canvas element
   canvas: document.createElement('canvas'),

   //set up the canvas
   start: function () {
       this.context = this.canvas.getContext('2d');
       this.canvas.height = 400;
       this.canvas.width = 400;
       document.body.insertBefore(this.canvas ,document.body.childNodes[0]);
    },

    //clear the canvas
    clear: function() {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    //create Square
    createSquare: function(color, height, width, x, y) {
        this.height = height;
        this.width = width;
        this.color = color;
        this.x = x;
        this.y = y;

        this.update = function(){
            this.context.fillStyle = this.color;
            this.context.fillRect(this.x , this.y , this.width, this.height);
        }
       }
     }
    startGame();
    setInterval(updateGame,50);

Answer 1

It needs a little change to work. The explanation is in the code below. Working example https://jsbin.com/gafetoxapu/edit?js,output

function startGame() {
   game.start();
   game.createSquare('red', 100, 10, 10, 10);
}

function updateGame() {
    game.clear();
    //lines below are causing issues
    game.x += game.delta; // set new position

    // if rectangle touches right side (remember about the width of rectangle),
    // or touches left side of canvas, revert direction
    if(game.x > game.canvas.width - game.width || game.x <= 0){
       game.delta *= -1;
    }

    game.update();
    }

var game = {
   //create the canvas element
   canvas: document.createElement('canvas'),

   //set up the canvas
   start: function () {
       this.context = this.canvas.getContext('2d');
       this.canvas.height = 400;
       this.canvas.width = 400;
       document.body.insertBefore(this.canvas ,document.body.childNodes[0]);
    },

    //clear the canvas
    clear: function() {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    //create Square
    createSquare: function(color, height, width, x, y) {
        this.height = height;
        this.width = width;
        this.color = color;
        this.x = x;
        this.y = y;
        this.delta = 1; // this is speed and direction of movement 

        this.update = function(){
            this.context.fillStyle = this.color;
            this.context.fillRect(this.x , this.y , this.width, this.height);
        }
       }
     }
    startGame();
    setInterval(updateGame,50);