Skip to content
QRCodeSDK
ALPHA

Canvas element renderer

When to use

Section titled “When to use”

Use QRCodeCanvasRenderer when browser code needs to draw, composite, inspect, or manually export raster output through the Canvas API.

Minimal example

Section titled “Minimal example”
import {QRCodeCanvasRenderer} from '@qrcodesdk/browser';
import {qrcode} from '@qrcodesdk/core';


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

Learn here more about using the Canvas Element in the browser.

Return value

Section titled “Return value”

The renderer synchronously returns a new HTMLCanvasElement. Its pixel width and height are both style.moduleSize × (matrix width + 2 × style.quietZone). RGBA colors retain their alpha.

Renderer-specific options

Section titled “Renderer-specific options”

QRCodeCanvasRendererOptions accepts the shared visual style and a prepared center image:

Option Type Default Effect
style QRCodeVisualStyle shared defaults Applies graphical dimensions, colors, and shapes
accessibility.ariaLabel string undefined Sets an aria-label attribute
accessibility.title string undefined Sets a title attribute
centerImage.source CanvasImageSource required with centerImage Draws an already-ready browser image source
centerImage.size number 0.4 Image box as a fraction of matrix width
centerImage.padding number 1 Clear padding measured in modules
centerImage.clearBackground boolean true Clears modules behind the image and padding

Renderer-specific constraints

Section titled “Renderer-specific constraints”
  • The renderer is synchronous. An image source must be loaded and expose positive intrinsic dimensions before rendering; unloaded or zero-sized sources throw.
  • centerImage.source may be any ready CanvasImageSource, such as an HTMLImageElement, another canvas, or an ImageBitmap.
  • A non-empty ariaLabel, or a non-empty title when ariaLabel is blank, sets role="img" and aria-label on the Canvas element. The Canvas is decorative only when both are blank. For more accessibility controls, use the PNG-backed Image renderer for native image attributes.
  • Options are validated and copied when QRCodeCanvasRenderer() is called. The prepared image source is retained by identity and checked when rendering.
Section titled “Related guides”
Section titled “Related pages”