HTML5 Canvas

Draw the score into <canvas> elements instead of SVG. Reach for the Canvas backend when a score is dense enough that the SVG DOM would slow scrolling — think a rehearsal piano-vocal reduction spanning a hundred systems — or when you overlay a matching pixel-perfect canvas on top of the score for animations that need to align with the raster.

When Canvas is the right pick

HTML5 Canvas is a Web-only backend — .NET uses Skia, Android uses Skia. On the Web, reach for it when:

• The score is long or dense. Thousands of SVG nodes slow down scrolling and repaint; a canvas surface stays a single element regardless of note count.
• You do not need per-element CSS or hit-testing on the DOM. alphaTab's own bounds lookup still works for mouse and touch — see Bounds lookup — but you cannot restyle a single glyph via a CSS selector.
• You want HighDPI-aware raster output. Canvas honors display.scale and the device pixel ratio, so the render stays sharp on retina and 4K displays.

If you need selectable, styleable, or printable output, stay on SVG. Canvas is the tuning knob for throughput, not the default.

Show it in code

import * as alphaTab from '@coderline/alphatab';

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
  core: {
    file: '/scores/song.gp',
    engine: 'html5',
  },
});

getAlphaTabContainer() is the placeholder for the render target — on Web that is the <div> alphaTab attaches to. Canvas is only available on the Web runtime; passing engine: 'html5' from .NET or Android falls back to the platform default.

Where to look next

• SVG rendering — the vector default, better for print and accessibility.
• Skia rendering (.NET / Android) — the native raster equivalent off the Web.
• Choosing a backend — side-by-side comparison.
• core.engine in the settings reference.