The encoding of the Gif fails depending on the size of the canvas

Hey there! Wonderful work, I love using this library. :) I've been having problems when encoding cavas contexts with very little in them.

Here is an example file:

<!DOCTYPE html>
<html>
    <head>
        <title>Gif testcase</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="LZWEncoder.js"></script>
        <script src="NeuQuant.js"></script>
        <script src="GIFEncoder.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" width="300" height="300"></canvas>
        <script type="text/javascript">
          var myCanvas = document.getElementById('myCanvas');
          var context = myCanvas.getContext('2d');

          context.fillStyle = 'rgb(255,255,255)';
          context.fillRect(0, 0, myCanvas.width, myCanvas.height);

          context.strokeStyle = "#000000";
          context.beginPath();
          context.moveTo(5, 5);
          context.lineTo(5, 30);
          context.stroke();

          var encoder = new GIFEncoder();
          encoder.start();
          encoder.addFrame(context);
          encoder.finish();

          var binary_gif = encoder.stream().getData();
          var data_url = 'data:image/gif;base64,' + window.btoa(binary_gif);
          document.location.href = data_url;
        </script>
    </body>
</html>

This works perfecly. However, if I change the width or height attribute of my canvas, let's say to 250px:

<!DOCTYPE html>
<html>
    <head>
        <title>Gif testcase</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="LZWEncoder.js"></script>
        <script src="NeuQuant.js"></script>
        <script src="GIFEncoder.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" width="250" height="250"></canvas>
        <script type="text/javascript">
          var myCanvas = document.getElementById('myCanvas');
          var context = myCanvas.getContext('2d');

          context.fillStyle = 'rgb(255,255,255)';
          context.fillRect(0, 0, myCanvas.width, myCanvas.height);

          context.strokeStyle = "#000000";
          context.beginPath();
          context.moveTo(5, 5);
          context.lineTo(5, 30);
          context.stroke();

          var encoder = new GIFEncoder();
          encoder.start();
          encoder.addFrame(context);
          encoder.finish();

          var binary_gif = encoder.stream().getData();
          var data_url = 'data:image/gif;base64,' + window.btoa(binary_gif);
          document.location.href = data_url;
        </script>
    </body>
</html>

Then the resulting gif is empty. It is encoded, however there's nothing in it. No line.

Any idea on what the problem could be?

antimatter15 / jsgif

The encoding of the Gif fails depending on the size of the canvas #6