Solved multiple canvas issue

[TonyWhite]

If el is already populate, it makes duplicate childs that can't fit in original geometry.
I added row 360 with this code to avoid the bug.
el.innerHTML = "";

Scenario for multiple canvas issue on Codepen
https://codepen.io/tonywhite1985/pen/bGgedMN?editors=1000

Try to comment this in JS tab on row 918
el.innerHTML = "";
and see glithes.

1. Open RESULT tab and start typing some text to encode
2. Detele all text
3. Try to type another text to encode
4. See qrcode (it shows badly when el.innerHTML = ""; is under comment)

[TonyWhite]

I have improved the modularity of my scenario. Now, if you delete el.innerHTML = "", the glitch is immediately visible.

[markvantilburg]

This would solve it for your use case without needing to changing the library.

Clear the element where the qr code is added before you call the method to add the qr code:

function createQRCode(textToEncode) {
document.getElementById("qrcode").innerHTML = '';
  qrcode = new QRCode(document.getElementById("qrcode"), {
    text: textToEncode,
    width: 300,
    height: 300,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : qrcodeQuality
  });
}

[TonyWhite]

@markvantilburg it was my first step to solving the glitch. However the library adds a child without deleting or checking if another one already exists. I think it is useful to limit human errors by simplifying routine maintenance.