jsBarcode doesn't update when trying to creat multiple barcodes with multiple canvases

[moda20]

I am trying to create multiple barcodes to later print in multiple pages. My issue is that when looking on an array of data to put in the barcode, I found out that the barcodes don't change after the first one, so creating 50 barcodes from 50 different data strings, would result in 50 identical barcodes as the first one.

my code is something like this :

await Promise.all(dataArray.map(stringData => {
 const canvas = createCanvas();
 JsBarcode(canvas, stringData, {
    displayValue: false,
    width: 1,
  });
codes.push(canvas.toDataURL());
}))

the codes generated are all the same

[lindell]

Please creating a working example that can be run using something like jsfiddle.

[bstuff]

my initial code was like

  useEffect(() => {
    JsBarcode($canvas.current)
      .CODE128(code, {
        height: 60,
        margin: 0,
        // displayValue: false,
      })
      .render();
  }, [code]);

and it produced results like: (notice margins)

1st pass 1st barcode: 1st pass 2nd and 3rd barcode:

@lindell maybe it'll help you. Looks like your code produces side effects and not purposed to run in multi-instance mode.

hofix that helped me (sorry for react-specific code 🙃 ):

  useLayoutEffect(() => {
    const api = JsBarcode($canvas.current).CODE128(code, {
      height: 60,
      margin: 0,
      // displayValue: false,
    });

    const frameId = requestAnimationFrame(() => api.render());

    return () => {
      cancelAnimationFrame(frameId);
    };
  }, [code]);

[bstuff]

@lindell @moda20 here's jsfiddle https://jsfiddle.net/bstuff/oezgfus1/

[lindell]

Thanks, @bstuff for the clear example. It does indeed seem to be a bug with multiple barcodes and margins (but not other options). I will make sure this gets fixed for JsBarcode v4.

But I don't think this is the same problem as @moda20 had.