# GameLoop(​properties)

The game loop updates and renders the game every frame. The game loop is stopped by default and will not start until the loops `start()` function is called.

The game loop uses a time-based animation with a fixed `dt` to avoid frame rate issues. Each update call is guaranteed to equal 1/60 of a second.

This means that you can avoid having to do time based calculations in your update functions and instead do fixed updates.

    let { Sprite, GameLoop } = kontra;

    let sprite = Sprite({
      x: 100,
      y: 200,
      width: 20,
      height: 40,
      color: 'red'
    });

    let loop = GameLoop({
      update: function(dt) {
        // no need to determine how many pixels you want to
        // move every second and multiple by dt
        // sprite.x += 180 * dt;

        // instead just update by how many pixels you want
        // to move every frame and the loop will ensure 60FPS
        sprite.x += 3;
      },
      render: function() {
        sprite.render();
      }
    });

    loop.start();

    import { Sprite, GameLoop } from 'path/to/kontra.mjs';

    let sprite = Sprite({
      x: 100,
      y: 200,
      width: 20,
      height: 40,
      color: 'red'
    });

    let loop = GameLoop({
      update: function(dt) {
        // no need to determine how many pixels you want to
        // move every second and multiple by dt
        // sprite.x += 180 * dt;

        // instead just update by how many pixels you want
        // to move every frame and the loop will ensure 60FPS
        sprite.x += 3;
      },
      render: function() {
        sprite.render();
      }
    });

    loop.start();

    import { Sprite, GameLoop } from 'kontra';

    let sprite = Sprite({
      x: 100,
      y: 200,
      width: 20,
      height: 40,
      color: 'red'
    });

    let loop = GameLoop({
      update: function(dt) {
        // no need to determine how many pixels you want to
        // move every second and multiple by dt
        // sprite.x += 180 * dt;

        // instead just update by how many pixels you want
        // to move every frame and the loop will ensure 60FPS
        sprite.x += 3;
      },
      render: function() {
        sprite.render();
      }
    });

    loop.start();

### GameLoop Parameters

`properties`

  Object. Properties of the game loop.

`properties.update`

  Function. Function called every frame to update the game. Is passed the fixed `dt` as a parameter.

`properties.render`

  Function. Function called every frame to render the game.

`properties.fps` Optional

  Number. Desired frame rate. Defaults to `60`.

`properties.clearCanvas` Optional

  Boolean. Clear the canvas every frame before the `render()` function is called. Defaults to `true`.

## GameLoop​.isStopped #

If the game loop is currently stopped.

    let { GameLoop } = kontra;

    let loop = GameLoop({
      // ...
    });
    console.log(loop.isStopped);  //=> true

    loop.start();
    console.log(loop.isStopped);  //=> false

    loop.stop();
    console.log(loop.isStopped);  //=> true

    import { GameLoop } from 'path/to/kontra.mjs';

    let loop = GameLoop({
      // ...
    });
    console.log(loop.isStopped);  //=> true

    loop.start();
    console.log(loop.isStopped);  //=> false

    loop.stop();
    console.log(loop.isStopped);  //=> true

    import { GameLoop } from 'kontra';

    let loop = GameLoop({
      // ...
    });
    console.log(loop.isStopped);  //=> true

    loop.start();
    console.log(loop.isStopped);  //=> false

    loop.stop();
    console.log(loop.isStopped);  //=> true

## GameLoop​.render(​) #

Called every frame to render the game. Put all of your games render logic here.

## GameLoop​.start(​) #

Start the game loop.

## GameLoop​.stop(​) #

Stop the game loop.

## GameLoop​.update(​dt) #

Called every frame to update the game. Put all of your games update logic here.

### update Parameters

`dt`

  Number. The fixed dt time of 1/60 of a frame.