QR Code Generation

FxCanvas includes built-in QR code generation capabilities through the QRContext extension. This allows you to programmatically create QR codes that encode text data, with configurable error correction levels and modes.

INFO

QR Code is a registered trademark of DENSO WAVE INCORPORATED

Definitions

• ECC (Error Correction Code): Redundancy level for data recovery (L=7%, M=15%, Q=25%, H=30%).
• Module: Smallest square unit in a QR code (black/white square).

Basic QR Code Generation

import { CanvasEncoder, QRMode, QRCorrectionLevel } from 'fxcanvas';

const canvas = new CanvasEncoder(400, 200);

// Draw a QR code encoding "Hello World"
canvas.qr.drawQRCode(50, 50, 100, 'Hello World');

QR Code Parameters

Position and Size

// Draw QR code at (x, y) with specified size
canvas.qr.drawQRCode(x, y, size, text);

- `x`, `y`: Top-left position of the QR code
- `size`: Width and height of the QR code square
- `text`: The text data to encode

Note that while you can specify a desired QR size, the minimum QR size is determined by the space required for 4 pixels per module (2x2 block). FxCanvas automatically sets a lower bound based on the input length, ECC level, and encoding mode. The specified size can only upscale from this minimum.

To choose an appropriate size for your expected input range, consult the threshold tables below.

Encoding Modes

QR mode is automatically detected from the input text. Supported modes include Numeric, Alphanumeric, Byte, and Kanji.

// Numeric data (digits only, most efficient)
canvas.qr.drawQRCode(50, 50, 100, '1234567890');

// Alphanumeric data (digits, letters, some symbols)
canvas.qr.drawQRCode(50, 50, 100, 'HELLO123');

// Byte data (any 8-bit data, including Unicode)
canvas.qr.drawQRCode(50, 50, 100, 'Hello 世界');

// Kanji data (Japanese characters)
canvas.qr.drawQRCode(50, 50, 100, '日本語');

Error Correction Levels

Configure error correction for reliability:

import { QRCorrectionLevel } from 'fxcanvas';

// Low correction (7% of data can be restored)
canvas.qr.setErrorCorrectionLevel(QRCorrectionLevel.L);

// Medium correction (15% of data can be restored) - Default
canvas.qr.setErrorCorrectionLevel(QRCorrectionLevel.M);

// Quartile correction (25% of data can be restored)
canvas.qr.setErrorCorrectionLevel(QRCorrectionLevel.Q);

// High correction (30% of data can be restored)
canvas.qr.setErrorCorrectionLevel(QRCorrectionLevel.H);

canvas.qr.drawQRCode(50, 50, 100, 'Important Data');

Higher error correction levels create larger QR codes but can withstand more damage.

Advanced Usage

Multiple QR Codes

Draw multiple QR codes in a single composition:

// QR code for URL
canvas.qr.setErrorCorrectionLevel(QRCorrectionLevel.M);
canvas.qr.drawQRCode(50, 50, 80, 'https://example.com');

// QR code for contact info
canvas.qr.setErrorCorrectionLevel(QRCorrectionLevel.H);
canvas.qr.drawQRCode(200, 50, 80, 'BEGIN:VCARD\nFN:John Doe\nEND:VCARD');

// QR code for WiFi credentials
const wifiData = 'WIFI:S:MyNetwork;T:WPA;P:mypassword;;';
canvas.qr.setErrorCorrectionLevel(QRCorrectionLevel.Q);
canvas.qr.drawQRCode(50, 200, 80, wifiData);

Styled QR Codes

Combine QR codes with other drawing operations:

// Draw background
canvas.setFillStyle(new Color(255, 255, 255));
canvas.fillRect(40, 40, 120, 120);

// Draw QR code
canvas.qr.drawQRCode(50, 50, 100, 'Styled QR Code');

// Add border
canvas.setStrokeStyle(new Color(0, 0, 0));
canvas.setLineWidth(2);
canvas.strokeRect(40, 40, 120, 120);

// Add label
const font = new Font({ size: 12, faces: [fontFace] });
canvas.setFont(font);
canvas.setFillStyle(new Color(0, 0, 0));
canvas.setTextAlign(TextAlign.Center);
canvas.fillText('Scan me!', 100, 170);

QR codes can include custom text styling; see Fonts and Text.

Combine QR codes with background images; see Working with Images.

Transformed QR Codes

Apply transformations to QR codes:

canvas.save();
canvas.translate(150, 150);
canvas.rotate(Math.PI / 6); // 30-degree rotation
canvas.qr.drawQRCode(-50, -50, 100, 'Rotated QR');
canvas.restore();

QR Code Limitations

• Maximum data capacity depends on mode and error correction level
• Very large data may require high error correction or may not fit
• QR codes work best with square dimensions
• Complex transformations may affect scanability

Use Cases

QR codes are perfect for:

• URLs and Links: Website addresses, app downloads
• Contact Information: vCard data, business cards
• WiFi Credentials: Network sharing
• Text Messages: Short text content
• Event Details: Calendar events, tickets
• Product Information: Serial numbers, specifications

Threshold Tables

The following tables show the minimum square pixel dimensions required for different input lengths, ECC levels, and encoding modes at 4 pixels per module. These represent the automatic lower bounds that FxCanvas enforces.

Numeric Encoding Thresholds

ECC Level	Input Length Range	Min Size
Low	0-41	84
Low	42-77	100
Low	78-127	116
Low	128-187	132
Low	188-255	148
Low	256-322	164
Low	323-370	180
Low	371-461	196
Low	462-552	212
Low	553-652	228
Low	653-772	244
Low	773-883	260
Low	884-1022	276
Low	1023-1101	292
Low	1102-1250	308
Low	1251-1408	324
Low	1409-1548	340
Low	1549-1725	356
Low	1726-1903	372
Low	1904-2061	388
Low	2062-2232	404
Low	2233-2409	420
Low	2410-2620	436
Low	2621-2812	452
Low	2813-3057	468
Low	3058-3283	484
Low	3284-3517	500
Low	3518-3669	516
Low	3670-3909	532
Low	3910-4158	548
Low	4159-4417	564
Low	4418-4686	580
Low	4687-4965	596
Low	4966-5253	612
Low	5254-5529	628
Low	5530-5836	644
Low	5837-6153	660
Low	6154-6479	676
Low	6480-6743	692
Low	6744-7089	708
Medium	0-34	84
Medium	35-63	100
Medium	64-101	116
Medium	102-149	132
Medium	150-202	148
Medium	203-255	164
Medium	256-293	180
Medium	294-365	196
Medium	366-432	212
Medium	433-513	228
Medium	514-604	244
Medium	605-691	260
Medium	692-796	276
Medium	797-871	292
Medium	872-991	308
Medium	992-1082	324
Medium	1083-1212	340
Medium	1213-1346	356
Medium	1347-1500	372
Medium	1501-1600	388
Medium	1601-1708	404
Medium	1709-1872	420
Medium	1873-2059	436
Medium	2060-2188	452
Medium	2189-2395	468
Medium	2396-2544	484
Medium	2545-2701	500
Medium	2702-2857	516
Medium	2858-3035	532
Medium	3036-3289	548
Medium	3290-3486	564
Medium	3487-3693	580
Medium	3694-3909	596
Medium	3910-4134	612
Medium	4135-4343	628
Medium	4344-4588	644
Medium	4589-4775	660
Medium	4776-5039	676
Medium	5040-5313	692
Medium	5314-5596	708
Quartile	0-27	84
Quartile	28-48	100
Quartile	49-77	116
Quartile	78-111	132
Quartile	112-144	148
Quartile	145-178	164
Quartile	179-207	180
Quartile	208-259	196
Quartile	260-312	212
Quartile	313-364	228
Quartile	365-427	244
Quartile	428-489	260
Quartile	490-580	276
Quartile	581-621	292
Quartile	622-703	308
Quartile	704-775	324
Quartile	776-876	340
Quartile	877-948	356
Quartile	949-1063	372
Quartile	1064-1159	388
Quartile	1160-1224	404
Quartile	1225-1358	420
Quartile	1359-1468	436
Quartile	1469-1588	452
Quartile	1589-1718	468
Quartile	1719-1804	484
Quartile	1805-1933	500
Quartile	1934-2085	516
Quartile	2086-2181	532
Quartile	2182-2358	548
Quartile	2359-2473	564
Quartile	2474-2670	580
Quartile	2671-2805	596
Quartile	2806-2949	612
Quartile	2950-3081	628
Quartile	3082-3244	644
Quartile	3245-3417	660
Quartile	3418-3599	676
Quartile	3600-3791	692
Quartile	3792-3993	708
High	0-17	84
High	18-34	100
High	35-58	116
High	59-82	132
High	83-106	148
High	107-139	164
High	140-154	180
High	155-202	196
High	203-235	212
High	236-288	228
High	289-331	244
High	332-374	260
High	375-427	276
High	428-468	292
High	469-530	308
High	531-602	324
High	603-674	340
High	675-746	356
High	747-813	372
High	814-919	388
High	920-969	404
High	970-1056	420
High	1057-1108	436
High	1109-1228	452
High	1229-1286	468
High	1287-1425	484
High	1426-1501	500
High	1502-1581	516
High	1582-1677	532
High	1678-1782	548
High	1783-1897	564
High	1898-2022	580
High	2023-2157	596
High	2158-2301	612
High	2302-2361	628
High	2362-2524	644
High	2525-2625	660
High	2626-2735	676
High	2736-2927	692
High	2928-3057	708

Alphanumeric Encoding Thresholds

ECC Level	Input Length Range	Min Size
Low	0-25	84
Low	26-47	100
Low	48-77	116
Low	78-114	132
Low	115-154	148
Low	155-195	164
Low	196-224	180
Low	225-279	196
Low	280-335	212
Low	336-395	228
Low	396-468	244
Low	469-535	260
Low	536-619	276
Low	620-667	292
Low	668-758	308
Low	759-854	324
Low	855-938	340
Low	939-1046	356
Low	1047-1153	372
Low	1154-1249	388
Low	1250-1352	404
Low	1353-1460	420
Low	1461-1588	436
Low	1589-1704	452
Low	1705-1853	468
Low	1854-1990	484
Low	1991-2132	500
Low	2133-2223	516
Low	2224-2369	532
Low	2370-2520	548
Low	2521-2677	564
Low	2678-2840	580
Low	2841-3009	596
Low	3010-3183	612
Low	3184-3351	628
Low	3352-3537	644
Low	3538-3729	660
Low	3730-3927	676
Low	3928-4087	692
Low	4088-4296	708
Medium	0-20	84
Medium	21-38	100
Medium	39-61	116
Medium	62-90	132
Medium	91-122	148
Medium	123-154	164
Medium	155-178	180
Medium	179-221	196
Medium	222-262	212
Medium	263-311	228
Medium	312-366	244
Medium	367-419	260
Medium	420-483	276
Medium	484-528	292
Medium	529-600	308
Medium	601-656	324
Medium	657-734	340
Medium	735-816	356
Medium	817-909	372
Medium	910-970	388
Medium	971-1035	404
Medium	1036-1134	420
Medium	1135-1248	436
Medium	1249-1326	452
Medium	1327-1451	468
Medium	1452-1542	484
Medium	1543-1637	500
Medium	1638-1732	516
Medium	1733-1839	532
Medium	1840-1994	548
Medium	1995-2113	564
Medium	2114-2238	580
Medium	2239-2369	596
Medium	2370-2506	612
Medium	2507-2632	628
Medium	2633-2780	644
Medium	2781-2894	660
Medium	2895-3054	676
Medium	3055-3220	692
Medium	3221-3391	708
Quartile	0-16	84
Quartile	17-29	100
Quartile	30-47	116
Quartile	48-67	132
Quartile	68-87	148
Quartile	88-108	164
Quartile	109-125	180
Quartile	126-157	196
Quartile	158-189	212
Quartile	190-221	228
Quartile	222-259	244
Quartile	260-296	260
Quartile	297-352	276
Quartile	353-376	292
Quartile	377-426	308
Quartile	427-470	324
Quartile	471-531	340
Quartile	532-574	356
Quartile	575-644	372
Quartile	645-702	388
Quartile	703-742	404
Quartile	743-823	420
Quartile	824-890	436
Quartile	891-963	452
Quartile	964-1041	468
Quartile	1042-1094	484
Quartile	1095-1172	500
Quartile	1173-1263	516
Quartile	1264-1322	532
Quartile	1323-1429	548
Quartile	1430-1499	564
Quartile	1500-1618	580
Quartile	1619-1700	596
Quartile	1701-1787	612
Quartile	1788-1867	628
Quartile	1868-1966	644
Quartile	1967-2071	660
Quartile	2072-2181	676
Quartile	2182-2298	692
Quartile	2299-2420	708
High	0-10	84
High	11-20	100
High	21-35	116
High	36-50	132
High	51-64	148
High	65-84	164
High	85-93	180
High	94-122	196
High	123-143	212
High	144-174	228
High	175-200	244
High	201-227	260
High	228-259	276
High	260-283	292
High	284-321	308
High	322-365	324
High	366-408	340
High	409-452	356
High	453-493	372
High	494-557	388
High	558-587	404
High	588-640	420
High	641-672	436
High	673-744	452
High	745-779	468
High	780-864	484
High	865-910	500
High	911-958	516
High	959-1016	532
High	1017-1080	548
High	1081-1150	564
High	1151-1226	580
High	1227-1307	596
High	1308-1394	612
High	1395-1431	628
High	1432-1530	644
High	1531-1591	660
High	1592-1658	676
High	1659-1774	692
High	1775-1852	708

Byte Encoding Thresholds

ECC Level	Input Length Range	Min Size
Low	0-17	84
Low	18-32	100
Low	33-53	116
Low	54-78	132
Low	79-106	148
Low	107-134	164
Low	135-154	180
Low	155-192	196
Low	193-230	212
Low	231-271	228
Low	272-321	244
Low	322-367	260
Low	368-425	276
Low	426-458	292
Low	459-520	308
Low	521-586	324
Low	587-644	340
Low	645-718	356
Low	719-792	372
Low	793-858	388
Low	859-929	404
Low	930-1003	420
Low	1004-1091	436
Low	1092-1171	452
Low	1172-1273	468
Low	1274-1367	484
Low	1368-1465	500
Low	1466-1528	516
Low	1529-1628	532
Low	1629-1732	548
Low	1733-1840	564
Low	1841-1952	580
Low	1953-2068	596
Low	2069-2188	612
Low	2189-2303	628
Low	2304-2431	644
Low	2432-2563	660
Low	2564-2699	676
Low	2700-2809	692
Low	2810-2953	708
Medium	0-14	84
Medium	15-26	100
Medium	27-42	116
Medium	43-62	132
Medium	63-84	148
Medium	85-106	164
Medium	107-122	180
Medium	123-152	196
Medium	153-180	212
Medium	181-213	228
Medium	214-251	244
Medium	252-287	260
Medium	288-331	276
Medium	332-362	292
Medium	363-412	308
Medium	413-450	324
Medium	451-504	340
Medium	505-560	356
Medium	561-624	372
Medium	625-666	388
Medium	667-711	404
Medium	712-779	420
Medium	780-857	436
Medium	858-911	452
Medium	912-997	468
Medium	998-1059	484
Medium	1060-1125	500
Medium	1126-1190	516
Medium	1191-1264	532
Medium	1265-1370	548
Medium	1371-1452	564
Medium	1453-1538	580
Medium	1539-1628	596
Medium	1629-1722	612
Medium	1723-1809	628
Medium	1810-1911	644
Medium	1912-1989	660
Medium	1990-2099	676
Medium	2100-2213	692
Medium	2214-2331	708
Quartile	0-11	84
Quartile	12-20	100
Quartile	21-32	116
Quartile	33-46	132
Quartile	47-60	148
Quartile	61-74	164
Quartile	75-86	180
Quartile	87-108	196
Quartile	109-130	212
Quartile	131-151	228
Quartile	152-177	244
Quartile	178-203	260
Quartile	204-241	276
Quartile	242-258	292
Quartile	259-292	308
Quartile	293-322	324
Quartile	323-364	340
Quartile	365-394	356
Quartile	395-442	372
Quartile	443-482	388
Quartile	483-509	404
Quartile	510-565	420
Quartile	566-611	436
Quartile	612-661	452
Quartile	662-715	468
Quartile	716-751	484
Quartile	752-805	500
Quartile	806-868	516
Quartile	869-908	532
Quartile	909-982	548
Quartile	983-1030	564
Quartile	1031-1112	580
Quartile	1113-1168	596
Quartile	1169-1228	612
Quartile	1229-1283	628
Quartile	1284-1351	644
Quartile	1352-1423	660
Quartile	1424-1499	676
Quartile	1500-1579	692
Quartile	1580-1663	708
High	0-7	84
High	8-14	100
High	15-24	116
High	25-34	132
High	35-44	148
High	45-58	164
High	59-64	180
High	65-84	196
High	85-98	212
High	99-119	228
High	120-137	244
High	138-155	260
High	156-177	276
High	178-194	292
High	195-220	308
High	221-250	324
High	251-280	340
High	281-310	356
High	311-338	372
High	339-382	388
High	383-403	404
High	404-439	420
High	440-461	436
High	462-511	452
High	512-535	468
High	536-593	484
High	594-625	500
High	626-658	516
High	659-698	532
High	699-742	548
High	743-790	564
High	791-842	580
High	843-898	596
High	899-958	612
High	959-983	628
High	984-1051	644
High	1052-1093	660
High	1094-1139	676
High	1140-1219	692
High	1220-1273	708

The QR extension makes it easy to add scannable QR codes to your FxCanvas-generated images.