QR Code Generator

<label for="value">Text or URL</label>
<input id="value" value="https://example.com">
<canvas id="qr"></canvas>

#qr {
  display: block;
  width: 220px;
  height: 220px;
  margin-top: 1rem;
  image-rendering: pixelated;
}

const canvas = document.querySelector("#qr");
const context = canvas.getContext("2d");

document.querySelector("#value").addEventListener("input", event => {
  // Encode the value into a QR matrix, then draw its modules.
  const modules = createQrMatrix(event.target.value);
  drawModules(context, modules, canvas.width);
});

# No external package
# QR matrix and canvas rendering run in the browser