Screenshot bug when canvas fillStyle is black(#000000)

[yutingzhao1991]

<canvas width="400" height="300" id="canvas"></canvas>
<img id="img">

var gif = new GIF({
  workers: 2,
  quality: 10,
  width: 400,
  height: 300,
  transparent: true
})
gif.on('finished', function(blob) {
  var img = document.getElementById('img')
  img.src = URL.createObjectURL(blob)
})
var canvasEl = document.getElementById('canvas');
var ctx = canvasEl.getContext('2d');

// set fill color of context
ctx.fillStyle = 'black';
ctx.fillRect(100, 100, 20, 20);
// ctx.fillStyle = '#000002';
// ctx.fillRect(200, 200, 20, 20);
ctx.fillStyle = 'red';
ctx.fillRect(200, 100, 20, 20);
gif.addFrame(ctx, {
  delay: 10,
  copy: true
})
gif.render()

[yutingzhao1991]

Left is canvas element, right is img element.

The black block disappear in the image.