Render to Canvas

Use this when you need a browser-owned HTMLCanvasElement that can be inserted into a page, drawn into another canvas, converted to image bytes, or downloaded as a PNG.

Minimal example

1
import {CanvasQRCodeRenderer} from '@qrcodesdk/browser';
2
import {qrcode} from '@qrcodesdk/core';
3

4
const canvas = qrcode('https://qrcodesdk.dev').render(CanvasQRCodeRenderer());

The returned value is an HTMLCanvasElement containing rasterized QR code pixels.

Common options

You can customize the canvas output by passing styling options to CanvasQRCodeRenderer.

1
import {CanvasQRCodeRenderer} from '@qrcodesdk/browser';
2
import {qrcode} from '@qrcodesdk/core';
3

4
const canvas = qrcode('https://qrcodesdk.dev').render(
5
  CanvasQRCodeRenderer({
6
    size: 8,
7
    margin: 4,
8
    colors: {
9
      colorDark: '#111827',
10
      colorLight: '#ffffff',
11
    },
12
  }),
13
);

Option	Type	Default	Description
`size`	`number`	`5`	Pixel size of each QR module.
`margin`	`number`	`4`	Quiet-zone margin around the QR code, in modules.
`colors.colorDark`	`string`	`'#000000'`	Color used for dark QR modules.
`colors.colorLight`	`string`	`'#ffffff'`	Background color.

Colors must be 6-digit hex values such as '#000000', '#ffffff', or '#111827'.

Canvas output requires size to be a positive integer and margin to be a non-negative integer.

Common recipes

Insert into the DOM

1
import {CanvasQRCodeRenderer} from '@qrcodesdk/browser';
2
import {qrcode} from '@qrcodesdk/core';
3

4
const canvas = qrcode('https://qrcodesdk.dev').render(
5
  CanvasQRCodeRenderer({
6
    size: 8,
7
    margin: 4,
8
  }),
9
);
10

11
const container = document.querySelector('#qrcode');
12

13
if (container) {
14
  container.append(canvas);
15
}

1
<div id="qrcode"></div>

Draw into another canvas

1
import {CanvasQRCodeRenderer} from '@qrcodesdk/browser';
2
import {qrcode} from '@qrcodesdk/core';
3

4
const qrCanvas = qrcode('https://qrcodesdk.dev').render(CanvasQRCodeRenderer());
5
const target = document.querySelector<HTMLCanvasElement>('#target');
6
const context = target?.getContext('2d');
7

8
if (target && context) {
9
  target.width = qrCanvas.width;
10
  target.height = qrCanvas.height;
11
  context.drawImage(qrCanvas, 0, 0);
12
}

Download as PNG

1
import {CanvasQRCodeRenderer} from '@qrcodesdk/browser';
2
import {qrcode} from '@qrcodesdk/core';
3

4
const canvas = qrcode('https://qrcodesdk.dev').render(CanvasQRCodeRenderer());
5

6
canvas.toBlob((blob) => {
7
  if (!blob) return;
8

9
  const url = URL.createObjectURL(blob);
10
  const link = document.createElement('a');
11

12
  link.href = url;
13
  link.download = 'qrcode.png';
14
  link.click();
15

16
  URL.revokeObjectURL(url);
17
}, 'image/png');

Output details

The Canvas renderer generates:

A square HTMLCanvasElement
One pixel block per scaled QR module
A solid background using colors.colorLight
Dark modules using colors.colorDark
Fully opaque pixels
Browser-owned PNG bytes when exported with toBlob() or toDataURL('image/png')

The final canvas size is calculated as:

1
const imageSize = size * (moduleCount + 2 * margin);

For example, a QR matrix with 21 modules, size: 8, and margin: 4 produces:

1
8 * (21 + 2 * 4) = 232

So the output canvas is 232 x 232 pixels.