JavaScript QR Code Generator With Logo

import QRCode from "qrcode";

async function renderQrWithLogo(canvas, payload, logoImage, { level = "H", margin = 4, logoPercent = 22 }) {
  await QRCode.toCanvas(canvas, payload, { width: canvas.width, margin, errorCorrectionLevel: level });

  const ctx = canvas.getContext("2d");
  const symbolModules = QRCode.create(payload, { errorCorrectionLevel: level }).modules.size;
  const imageModules = symbolModules + margin * 2;
  const scale = canvas.width / imageModules;

  // A percentage of the symbol edge, not of the canvas: the quiet zone must not
  // change how big the mark looks.
  const side = (logoPercent / 100) * symbolModules * scale;
  const x = (canvas.width - side) / 2;

  ctx.fillStyle = "#ffffff";                       // guard plate
  ctx.fillRect(x - 8, x - 8, side + 16, side + 16);
  ctx.drawImage(logoImage, x, x, side, side);
}

// Percentages are taken of the SYMBOL edge, and the placement is in
// module units — so the same numbers position correctly at 320 px and 3,000 px.
const symbolModules = 25;              // v3: 21 data + border + format rows
const imageModules = symbolModules + margin * 2;
const logoSide = (logoPercent / 100) * symbolModules;
const centre = imageModules / 2;

ctx.drawImage(logo, centre - logoSide / 2, centre - logoSide / 2, logoSide, logoSide);

// Coverage is an area, which is why a 25% logo is not "a quarter of the code":
const coveredArea = ((logoSide + plate * 2) / symbolModules) ** 2; // 25% -> ~8%
const budget = { L: 0.07, M: 0.15, Q: 0.25, H: 0.3 }[errorCorrectionLevel];
const verdict = coveredArea / budget;   // <0.5 safe · <0.9 tight · else risky