19 / CANVAS2D / 2026-04-11
QR Generator
Turn any URL into a branded QR code. Download as PNG.
How it works
// 01 DPI and pixel density
The QR encoding runs through a compact JavaScript library that implements ISO/IEC 18004. The library takes the input string and the chosen error correction level and produces a 2D matrix of bits. Each bit becomes one module (one square) in the final code. The matrix size depends on the version of the QR code: version 1 is 21 by 21 modules, version 40 is 177 by 177, and the library picks the smallest version that fits the data at the chosen correction level.
// 02 Bleed and cut tolerance
The matrix is rendered to a canvas by iterating every cell and filling a square at the appropriate position. The module size (pixels per QR cell) is calculated from the target output resolution divided by the matrix size plus the quiet zone (a 4-module border around the code, required by the spec for reliable scanning). Skipping the quiet zone is the most common QR mistake in the wild; codes that print edge to edge frequently fail to decode.
// 03 Safe zone and trim accuracy
Logo overlay is a separate render pass. After the QR is drawn, the center region is cleared and the uploaded logo is drawn on top at a size equal to roughly 20% of the total code area. The error correction level is forced to H (30% recovery) when a logo is present so the overlay does not disqualify the code from decoding. The widget validates the final output with a scan check using an in-browser QR decoder before allowing the download.
// why this exists
branded QR output
A QR code is a pattern of black and white squares that a phone camera can decode into text, almost always a URL. Paste a URL into this widget and you get a PNG you can download, embed in a slide, print on a business card, or drop into a retail display. The output is correctly sized for print, branded with a custom color and optional center logo, and encoded at the right error correction level for the use case.
QR codes work because of a clever property of Reed-Solomon error correction: the decoder can reconstruct the original data even if up to 30% of the code is obscured, depending on the error correction level chosen at encode time. That is why a QR code still scans when part of it is torn, scratched, or has a logo placed in the center. The error correction level is a trade-off. Higher correction gives you more resilience but produces a denser code (more modules in the same physical size), which means you need more resolution when printed to stay scannable.
The four error correction levels are L (7% recovery), M (15%), Q (25%), and H (30%). Use L for clean conditions where the code is unlikely to be damaged. Use M as the default balance for most uses. Use Q or H when you want to overlay a logo in the center. The widget defaults to M for plain codes and automatically bumps to H when you add a logo, which is the behavior every branded QR generator should have but most do not.
For printed output, the rule of thumb is at least 2 centimeters square for a scan distance of 30 centimeters, with the size growing roughly proportional to scan distance. A poster meant to be scanned from 3 meters away needs a QR code around 15 centimeters square. Print resolution should be at least 300 dpi so the small square modules stay crisp. The widget generates at canvas-native resolution and lets you download at 512, 1024, or 2048 pixels so you can match your print target.
The widget never uploads your URL anywhere. Generation happens entirely in the browser using a QR encoding library and canvas2D rendering. The PNG is assembled locally and triggered for download with `URL.createObjectURL`. If privacy matters (internal URLs, signed links, embargoed content), that constraint is baked into the architecture.
Frequently asked questions
How does a QR code work?
It encodes a string (usually a URL) as a 2D matrix of black and white squares that a phone camera decodes using Reed-Solomon error correction. The pattern includes finder patterns, alignment patterns, and timing patterns that help the decoder orient and read the data.
What are the QR error correction levels?
L (7% recovery), M (15%), Q (25%), H (30%). Higher levels tolerate more damage or obscuring but produce denser codes. Use L for clean conditions, M as default, Q or H when overlaying a logo.
What resolution do I need for a printed QR code?
At least 300 dpi. For a 2 centimeters square code that is roughly 240 by 240 pixels. The widget generates at 512, 1024, or 2048 pixels so you have headroom for any reasonable print size.
Can I put my logo in the center of a QR code?
Yes, as long as the error correction level is Q or H. The widget automatically switches to H when you add a logo so the code stays decodable even with 30% of its area obscured by the overlay.
Why do some QR codes fail to scan?
Usually one of three issues: missing quiet zone (the required white border), too small for the scan distance, or low contrast between the modules and the background. Fix the quiet zone first; it is the most common bug.
What is the quiet zone?
A four-module-wide white border around the QR code. The spec requires it for reliable decoding. Codes that print edge-to-edge against a colored background frequently fail because the decoder cannot find the finder patterns.
Can I make a QR code in colors other than black and white?
Yes, but the contrast between the dark modules and the light background has to stay at least 5:1 (WCAG AA). The widget color picker warns you when your choices fall below the threshold.
Is there a limit on the URL length?
Yes. QR codes can hold up to around 2,953 bytes at version 40 with L error correction, but long URLs produce dense codes that need very high resolution to print reliably. Use a URL shortener for anything over 100 characters.
Does this upload my URL anywhere?
No. Generation is entirely browser-based. The URL, the rendered canvas, and the downloaded PNG all stay on your device.