### animator.start()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Starts running the GIF animation loop.

```APIDOC
## animator.start()

### Description
Starts running the GIF animation loop.
```

--------------------------------

### Start GIF Animation Loop

Source: https://context7.com/themadcreator/gifler/llms.txt

Starts or resumes the GIF animation loop. Initializes timing and schedules the first frame. Returns the Animator instance for chaining.

```javascript
gifler('animation.gif').get().then(function(animator) {
  var canvas = document.querySelector('canvas');
  // Set up canvas without starting automatically
  animator.animateInCanvas(canvas);

  // Start 3 seconds later
  setTimeout(function() {
    animator.start();
    console.log('Running:', animator.running()); // true
  }, 3000);
});
```

--------------------------------

### Bind Animator to Canvas and Start

Source: https://context7.com/themadcreator/gifler/llms.txt

Binds the animator to a canvas, sets up default frame handlers, and starts the animation. Optionally auto-sizes the canvas to GIF dimensions. Override `onDrawFrame` or `onFrame` before calling for custom rendering.

```javascript
gifler('animation.gif').get().then(function(animator) {
  var canvas = document.querySelector('canvas#output');

  // Override draw callback before binding — receives (ctx, frame, frameIndex)
  animator.onDrawFrame = function(ctx, frame, i) {
    // Apply a grayscale filter by manipulating pixel data
    ctx.drawImage(frame.buffer, frame.x, frame.y);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    for (var p = 0; p < data.length; p += 4) {
      var avg = (data[p] + data[p+1] + data[p+2]) / 3;
      data[p] = data[p+1] = data[p+2] = avg;
    }
    ctx.putImageData(imageData, 0, 0);
  };

  // Bind and start — canvas will auto-size to GIF dimensions
  animator.animateInCanvas(canvas, true);
});
```

--------------------------------

### animator.start()

Source: https://context7.com/themadcreator/gifler/llms.txt

Starts or resumes the GIF animation loop. It initializes the timing state and schedules the first frame. Returns the Animator instance for chaining.

```APIDOC
## animator.start()

### Description
Starts (or resumes) the GIF animation loop. Initializes the timing state and schedules the first frame via `setTimeout`. Returns the `Animator` instance for chaining.

### Method
`animator.start()`

### Example
```javascript
gifler('animation.gif').get().then(function(animator) {
  var canvas = document.querySelector('canvas');
  // Set up canvas without starting automatically
  animator.animateInCanvas(canvas);

  // Start 3 seconds later
  setTimeout(function() {
    animator.start();
    console.log('Running:', animator.running()); // true
  }, 3000);
});
```
```

--------------------------------

### Manual Animation Control with .get()

Source: https://context7.com/themadcreator/gifler/llms.txt

Obtain an Animator instance in an unstarted state using the .get() method. This is useful for scenarios requiring manual control over animation playback, such as starting, pausing, or resuming animations via button clicks. The Animator provides methods like animateInCanvas(), start(), and stop().

```javascript
gifler('assets/gif/animation.gif').get().then(function(animator) {
  var canvas = document.getElementById('manual-canvas');

  // Manually kick off animation into a canvas
  animator.animateInCanvas(canvas);

  // Wire up controls using the animator API
  document.getElementById('play-btn').addEventListener('click', function() {
    if (!animator.running()) {
      animator.start();
    }
  });

  document.getElementById('pause-btn').addEventListener('click', function() {
    animator.stop();
  });
});
```

--------------------------------

### gif.get()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Returns a promise that will be fulfilled with an Animator instance. The animator will be in an unstarted state, but can be started with a call to animator.animateInCanvas().

```APIDOC
## gif.get()

### Description
To get even more control, and for your convenience, this method returns a promise that will be fulfilled with an **Animator** instance. The animator will be in an unstarted state, but can be started with a call to **animator.animateInCanvas()**.

### Returns
A Promise that resolves to an **Animator** instance.
```

--------------------------------

### GIF Playback Control with Gifler

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/index.html

Control GIF playback (start/stop) by accessing the animator object returned by the .animate() method. This example attaches click events to the canvas for play/pause functionality.

```javascript
gifler('assets/gif/run.gif')
      .animate('canvas.play-pause')
      .then(function(animator) {
        $('canvas.play-pause').click(function(){
          if(animator.running()){
            animator.stop();
          } else {
            animator.start();
          }
        });
      });
```

--------------------------------

### Reset GIF Animation to Frame 0

Source: https://context7.com/themadcreator/gifler/llms.txt

Resets the animation to the first frame (index 0) and clears the loop counter. If the animation is running, it will continue from the first frame immediately. Does not stop or start the animation.

```javascript
gifler('animation.gif').get().then(function(animator) {
  var canvas = document.querySelector('canvas');
  animator.animateInCanvas(canvas);

  // Restart from the beginning every 10 seconds
  setInterval(function() {
    animator.reset();
    console.log('Animation reset to frame 0');
  }, 10000);
});
```

--------------------------------

### gifler()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

The main entrypoint to the library. Prepares and sends an XHR request to load the GIF file. Returns a Gif instance for interacting with the library.

```APIDOC
## gifler()

### Description
This is the main entrypoint to the library. Prepares and sends an XHR request to load the GIF file.

### Returns
A **Gif** instance object for interacting with the library.

### Arguments
- **url** (string) - URL to .gif file
```

--------------------------------

### gifler(url)

Source: https://context7.com/themadcreator/gifler/llms.txt

The main entrypoint for Gifler. It takes a URL to a GIF and returns a Gif instance immediately. You can then chain methods like .animate(), .frames(), or .get() onto this instance.

```APIDOC
## gifler(url)

### Description
The main entrypoint. Fires an async XHR GET for the GIF at `url`, returns a `Gif` instance immediately (before loading completes) that you chain `.animate()`, `.frames()`, or `.get()` on.

### Usage
```html
<!-- Include the library -->
<script src="gifler.min.js"></script>

<!-- Target canvas -->
<canvas id="my-canvas"></canvas>

<script>
  // Load a GIF and begin animating into the canvas immediately
  gifler('images/animation.gif').animate('#my-canvas');
</script>
```
```

--------------------------------

### Basic GIF Animation with Gifler

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/index.html

Use this to load a GIF and animate it directly onto a canvas element. Provide the GIF source and a canvas selector.

```javascript
gifler('assets/gif/run.gif').animate('canvas.running-pikachu')
```

--------------------------------

### Include Gifler and Animate GIF

Source: https://context7.com/themadcreator/gifler/llms.txt

Include the Gifler library via a script tag and then use the gifler() function to load a GIF and animate it into a specified canvas element.

```html
<script src="gifler.min.js"></script>

<canvas id="my-canvas"></canvas>

<script>
  // Load a GIF and begin animating into the canvas immediately
  gifler('images/animation.gif').animate('#my-canvas');
</script>
```

--------------------------------

### Basic GIF Animation in Canvas

Source: https://github.com/themadcreator/gifler/blob/master/README.md

Include the gifler.min.js script and use the gifler function to animate a GIF on a specified canvas element.

```html
<canvas class="example"></canvas>
<script src="gifler.min.js"></script>
<script>gifler('image.gif').animate('.example')</script>
```

--------------------------------

### gif.frames(selector, onDrawFrame, [setDimensions])

Source: https://context7.com/themadcreator/gifler/llms.txt

Runs the GIF animation but delegates all drawing to your provided `onDrawFrame` callback function. Gifler manages timing, looping, and frame disposal, allowing you to handle the pixel drawing within the callback. An optional `setDimensions` argument controls canvas auto-sizing.

```APIDOC
## gif.frames(selector, onDrawFrame, [setDimensions])

### Description
Runs the GIF animation but delegates all drawing to your `onDrawFrame(ctx, frame, index)` callback instead of the default draw routine. Gifler still manages all timing, looping, and frame disposal — you just put the pixels you want into the canvas context. The optional third argument `setDimensions` (default: `false`) controls whether the canvas is auto-sized to the GIF.

### Usage
```html
<canvas class="rainbow-pikachus" style="width:600px; height:100px;"></canvas>

<script>
  var frameCount = 0;

  function onDrawFrame(ctx, frame, i) {
    // Resize canvas to match its CSS display size
    ctx.canvas.width  = ctx.canvas.offsetWidth;
    ctx.canvas.height = ctx.canvas.offsetHeight;

    // Calculate how many copies fit horizontally
    var n = Math.floor(ctx.canvas.width / 150);

    for (var x = 0; x < n; x++) {
      // Draw the frame at offset positions
      ctx.globalCompositeOperation = 'source-over';
      ctx.drawImage(frame.buffer, frame.x + (x * 150), frame.y, 150, 100);

      // Tint each copy with a cycling rainbow hue
      var hue = (frameCount * 10 + x * 50) % 360;
      ctx.globalCompositeOperation = 'source-atop';
      ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
      ctx.fillRect(x * 150, 0, 150, this.height);
    }
    frameCount++;
  }

  gifler('assets/gif/run.gif').frames('canvas.rainbow-pikachus', onDrawFrame);
</script>
```
```

--------------------------------

### Custom GIF Frame Rendering with Gifler

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/index.html

Implement custom rendering logic for each GIF frame. The callback receives the canvas context and frame data, allowing manipulation before display. Gifler manages timing.

```javascript
var frames = 0;
    
    function onDrawFrame(ctx, frame) {
      // Match width/height to remove distortion
      ctx.canvas.width  = ctx.canvas.offsetWidth;
      ctx.canvas.height = ctx.canvas.offsetHeight;
    
      // Determine how many pikachus will fit on screen
      var n = Math.floor((ctx.canvas.width)/150)
    
      for(var x = 0; x < n; x++) {
        // Draw a pikachu
        var left = x * 150;
        ctx.globalCompositeOperation = 'source-over';
        ctx.drawImage(frame.buffer, frame.x + left, frame.y, 150, 100);
    
        // Composite a color
        var hue = (frames * 10 + x * 50) % 360;
        ctx.globalCompositeOperation = 'source-atop';
        ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
        ctx.fillRect(left, 0, 150, this.height);
      }
      frames++;
    }
    
    // Load the GIF, set custom frame render function
    gifler('assets/gif/run.gif')
      .frames('canvas.rainbow-pikachus', onDrawFrame);
```

--------------------------------

### animator.animateInCanvas(canvas, [setDimensions])

Source: https://context7.com/themadcreator/gifler/llms.txt

Binds the animator to a specified canvas element and sets up default frame handling. It automatically calls `animator.start()`. The optional `setDimensions` parameter, defaulting to `true`, resizes the canvas to match the GIF's dimensions. Custom rendering can be achieved by overriding `animator.onDrawFrame` or `animator.onFrame` before calling this method.

```APIDOC
## animator.animateInCanvas(canvas, [setDimensions])

### Description
Binds the animator to a canvas element, wires up the default `onFrame` and `onDrawFrame` handlers (including GIF disposal method 2 = clear, method 3 = restore), and calls `animator.start()`. The optional `setDimensions` argument (default: `true`) auto-sizes the canvas to the GIF's width/height. Override `animator.onDrawFrame` or `animator.onFrame` **before** calling this method for custom rendering.

### Method
`animator.animateInCanvas(canvas, [setDimensions])`

### Parameters
#### Path Parameters
- **canvas** (HTMLCanvasElement) - The canvas element to bind the animator to.
- **setDimensions** (boolean) - Optional. If true, the canvas will be resized to the GIF's dimensions. Defaults to true.

### Example
```javascript
gifler('animation.gif').get().then(function(animator) {
  var canvas = document.querySelector('canvas#output');

  // Override draw callback before binding — receives (ctx, frame, frameIndex)
  animator.onDrawFrame = function(ctx, frame, i) {
    // Apply a grayscale filter by manipulating pixel data
    ctx.drawImage(frame.buffer, frame.x, frame.y);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    for (var p = 0; p < data.length; p += 4) {
      var avg = (data[p] + data[p+1] + data[p+2]) / 3;
      data[p] = data[p+1] = data[p+2] = avg;
    }
    ctx.putImageData(imageData, 0, 0);
  };

  // Bind and start — canvas will auto-size to GIF dimensions
  animator.animateInCanvas(canvas, true);
});
```
```

--------------------------------

### Custom Frame Drawing with .frames()

Source: https://context7.com/themadcreator/gifler/llms.txt

Utilize the .frames() method to animate a GIF while delegating the drawing of each frame to a custom callback function. Gifler manages timing and frame disposal, allowing for custom per-frame rendering logic. The canvas can optionally be auto-sized.

```javascript
var frameCount = 0;

function onDrawFrame(ctx, frame, i) {
  // Resize canvas to match its CSS display size
  ctx.canvas.width  = ctx.canvas.offsetWidth;
  ctx.canvas.height = ctx.canvas.offsetHeight;

  // Calculate how many copies fit horizontally
  var n = Math.floor(ctx.canvas.width / 150);

  for (var x = 0; x < n; x++) {
    // Draw the frame at offset positions
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(frame.buffer, frame.x + (x * 150), frame.y, 150, 100);

    // Tint each copy with a cycling rainbow hue
    var hue = (frameCount * 10 + x * 50) % 360;
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
    ctx.fillRect(x * 150, 0, 150, this.height);
  }
  frameCount++;
}

gifler('assets/gif/run.gif').frames('canvas.rainbow-pikachus', onDrawFrame);
```

--------------------------------

### Create Offscreen Canvas Buffer for a Frame

Source: https://context7.com/themadcreator/gifler/llms.txt

A static utility to create an offscreen canvas populated with a single decoded GIF frame's pixel data. Used internally for caching frames for fast drawing. The `width`/`height` parameters should be the full GIF dimensions.

```javascript
gifler('animation.gif').get().then(function(animator) {
  // Access the decoded frames directly via the internal Decoder
  var frames = animator._frames;
  var firstFrame = frames[0];

  // Manually create a buffer canvas for a specific frame
  var buffer = gifler.Animator.createBufferCanvas(
    firstFrame,
    animator.width,   // full GIF width
    animator.height   // full GIF height
  );

  // Stamp it onto any canvas
  var ctx = document.querySelector('#snapshot').getContext('2d');
  ctx.drawImage(buffer, firstFrame.x, firstFrame.y);
});
```

--------------------------------

### gif.frames()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Runs the animation on the loaded GIF, but passes the canvas context and GIF frame to the onDrawFrame callback for rendering. This gives you complete control of how the frame is drawn into the canvas context.

```APIDOC
## gif.frames()

### Description
Runs the animation on the loaded GIF, but passes the canvas context and GIF frame to the **onDrawFrame** callback for rendering. This gives you complete control of how the frame is drawn into the canvas context.

### Arguments
- **selector** (string or HTMLCanvasElement) - A <canvas> element or query selector for a <canvas> element.
- **onDrawFrame** (function) - A callback that will be invoked when each frame should be drawn into the canvas. See Animator.onDrawFrame.
- **setDimesions** (boolean, optional) - If true, the canvas's width/height will be set to the dimension of the loaded GIF. Defaults to false.
```

--------------------------------

### animator.animateInCanvas()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Prepares the canvas to be drawn into and sets up the callbacks for each frame while the animation is running. You can override animator.onDrawFrame() and animator.onFrame() before calling this method to customize frame drawing and handling.

```APIDOC
## animator.animateInCanvas()

### Description
This method prepares the canvas to be drawn into and sets up the callbacks for each frame while the animation is running. To change how each frame is drawn into the canvas, override **animator.onDrawFrame()** before calling this method. If **animator.onDrawFrame()** is not set, we simply draw the frame directly into the canvas as is. You may also override **animator.onFrame()** before calling this method. onFrame handles the lazy construction of canvas buffers for each frame as well as the disposal method for each frame.

### Arguments
- **canvas** (HTMLCanvasElement) - A canvas element.
- **setDimensions** (boolean, optional) - If true, the canvas width/height will be set to match the GIF. Defaults to true.
```

--------------------------------

### animator.running()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Returns a boolean indicating whether or not the animation is running.

```APIDOC
## animator.running()

### Description
Returns a boolean indicating whether or not the animation is running.

### Returns
A boolean indicating whether or not the animation is running.
```

--------------------------------

### animator::createBufferCanvas()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Creates a buffer canvas element since it is much faster to call .putImage() than .putImageData(). The omggif library decodes the pixels into the full gif dimensions. We only need to store the frame dimensions, so we offset the putImageData call.

```APIDOC
## animator::createBufferCanvas()

### Description
Creates a buffer canvas element since it is much faster to call **.putImage()** than **.putImageData()**. The omggif library decodes the pixels into the full gif dimensions. We only need to store the frame dimensions, so we offset the putImageData call.

### Arguments
- **frame** (object) - A frame of the GIF (from the omggif library)
- **width** (number) - width of the GIF (not the frame)
- **height** (number) - height of the GIF

### Returns
A <canvas> element containing the frame's image.
```

--------------------------------

### Animate GIF into Canvas using Selector or Element

Source: https://context7.com/themadcreator/gifler/llms.txt

Use the .animate() method to render a GIF into a canvas. This method accepts either a CSS query selector string or a direct HTMLCanvasElement reference. The returned Promise resolves to the Animator instance once animation begins.

```html
<canvas class="my-gif"></canvas>

<script>
  // Using a query selector string
  gifler('nyan.gif').animate('canvas.my-gif');

  // Using a DOM element reference directly
  var canvas = document.getElementById('output');
  gifler('nyan.gif').animate(canvas);

  // The returned promise resolves to the Animator
  gifler('nyan.gif')
    .animate('canvas.my-gif')
    .then(function(animator) {
      console.log('Animation started. Running:', animator.running()); // true
    });
</script>
```

--------------------------------

### Animate GIF on Canvas and Image

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/examples.html

Use this snippet to load a GIF and animate it on a canvas element while also setting the source for an associated image element. Ensure the selector correctly targets the desired elements.

```javascript
var url = "assets/gif/nyan.gif";
var selector = ".nyancat";
gifler(url).animate(document.querySelector('canvas' + selector));
document.querySelector('img' + selector).src = url;
```

```javascript
var url = "assets/gif/florian-8.gif";
var selector = ".florian";
gifler(url).animate(document.querySelector('canvas' + selector));
document.querySelector('img' + selector).src = url;
```

```javascript
var url = "assets/gif/pots.gif";
var selector = ".pots";
gifler(url).animate(document.querySelector('canvas' + selector));
document.querySelector('img' + selector).src = url;
```

```javascript
var url = "assets/gif/toroid.gif";
var selector = ".toroid";
gifler(url).animate(document.querySelector('canvas' + selector));
document.querySelector('img' + selector).src = url;
```

--------------------------------

### gif.animate()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Animates the loaded GIF, drawing each frame into the canvas. This matches the look of an <img> tag.

```APIDOC
## gif.animate()

### Description
Animates the loaded GIF, drawing each frame into the canvas. This matches the look of an <img> tag.

### Arguments
- **selector** (string or HTMLCanvasElement) - A <canvas> element or query selector for a <canvas> element.
```

--------------------------------

### Animator.createBufferCanvas(frame, width, height)

Source: https://context7.com/themadcreator/gifler/llms.txt

A static utility method that creates an offscreen canvas element populated with the pixel data of a single decoded GIF frame. This is used internally to cache frames as canvas buffers for faster drawing. The `width` and `height` parameters should be the full dimensions of the GIF, not just the frame, to ensure correct pixel blitting.

```APIDOC
## Animator.createBufferCanvas(frame, width, height) (static)

### Description
A static utility that creates an offscreen `<canvas>` element populated with a single decoded GIF frame's pixel data. Used internally by `animateInCanvas` to lazily cache each frame as a canvas buffer, enabling fast `drawImage` calls instead of repeated `putImageData`. The `width`/`height` are the full GIF dimensions (not the frame's), used to correctly offset the pixel blit.

### Method
`gifler.Animator.createBufferCanvas(frame, width, height)`

### Parameters
#### Path Parameters
- **frame** (object) - The decoded GIF frame object.
- **width** (number) - The full width of the GIF.
- **height** (number) - The full height of the GIF.

### Example
```javascript
gifler('animation.gif').get().then(function(animator) {
  // Access the decoded frames directly via the internal Decoder
  var frames = animator._frames;
  var firstFrame = frames[0];

  // Manually create a buffer canvas for a specific frame
  var buffer = gifler.Animator.createBufferCanvas(
    firstFrame,
    animator.width,   // full GIF width
    animator.height   // full GIF height
  );

  // Stamp it onto any canvas
  var ctx = document.querySelector('#snapshot').getContext('2d');
  ctx.drawImage(buffer, firstFrame.x, firstFrame.y);
});
```
```

--------------------------------

### Stop GIF Animation Loop

Source: https://context7.com/themadcreator/gifler/llms.txt

Stops the animation loop, leaving the last frame visible. Pairs with `.start()` for play/pause functionality. Returns the Animator instance for chaining.

```javascript
gifler('animation.gif')
  .animate('canvas.play-pause')
  .then(function(animator) {
    // Toggle play/pause on canvas click
    document.querySelector('canvas.play-pause').addEventListener('click', function() {
      if (animator.running()) {
        animator.stop();
        console.log('Paused on frame.');
      } else {
        animator.start();
        console.log('Resumed.');
      }
    });
  });
```

--------------------------------

### gif.animate(selector)

Source: https://context7.com/themadcreator/gifler/llms.txt

Animates the loaded GIF into the target canvas, auto-sizing the canvas to the GIF's dimensions. This method behaves identically to an <img> tag and requires no custom rendering. It accepts a CSS query selector string or a direct HTMLCanvasElement reference.

```APIDOC
## gif.animate(selector)

### Description
Animates the loaded GIF into the target canvas, auto-sizing the canvas to the GIF's dimensions. Behaves identically to an `<img>` tag — no custom rendering needed. Accepts a CSS query selector string or a direct `HTMLCanvasElement` reference. Returns a Promise that resolves to the `Animator` instance once animation starts.

### Usage
```html
<canvas class="my-gif"></canvas>

<script>
  // Using a query selector string
  gifler('nyan.gif').animate('canvas.my-gif');

  // Using a DOM element reference directly
  var canvas = document.getElementById('output');
  gifler('nyan.gif').animate(canvas);

  // The returned promise resolves to the Animator
  gifler('nyan.gif')
    .animate('canvas.my-gif')
    .then(function(animator) {
      console.log('Animation started. Running:', animator.running()); // true
    });
</script>
```
```

--------------------------------

### animator.reset()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Resets the animation loop to the first frame. Does not stop the animation from running.

```APIDOC
## animator.reset()

### Description
Resets the animation loop to the first frame. Does not stop the animation from running.
```

--------------------------------

### Check if GIF Animation is Running

Source: https://context7.com/themadcreator/gifler/llms.txt

Returns a boolean indicating if the animation loop is currently active. Useful for implementing toggling logic in event handlers.

```javascript
gifler('animation.gif')
  .animate('#output')
  .then(function(animator) {
    setInterval(function() {
      console.log('Animator is running:', animator.running()); // true / false
    }, 1000);
  });
```

--------------------------------

### animator.stop()

Source: https://github.com/themadcreator/gifler/blob/master/gh-pages/docs.html

Stops running the GIF animation loop.

```APIDOC
## animator.stop()

### Description
Stops running the GIF animation loop.
```

--------------------------------

### animator.stop()

Source: https://context7.com/themadcreator/gifler/llms.txt

Stops the animation loop, leaving the canvas on the last drawn frame. This method is designed to pair with `.start()` for implementing play/pause functionality. Returns the Animator instance for chaining.

```APIDOC
## animator.stop()

### Description
Stops the animation loop. The canvas retains its last drawn frame. Returns the `Animator` instance for chaining. Pairs with `.start()` to implement play/pause.

### Method
`animator.stop()`

### Example
```javascript
gifler('animation.gif')
  .animate('canvas.play-pause')
  .then(function(animator) {
    // Toggle play/pause on canvas click
    document.querySelector('canvas.play-pause').addEventListener('click', function() {
      if (animator.running()) {
        animator.stop();
        console.log('Paused on frame.');
      } else {
        animator.start();
        console.log('Resumed.');
      }
    });
  });
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.