Guides
Renderer
Choose WebGL or Canvas.
Most apps use WebGL. Canvas is useful for debugging or fallback work.
Configure the renderer before calling mount().
WebGL
import { Config } from 'svelte-tv';
import {
SdfTextRenderer,
WebGlCoreRenderer,
} from '@lightningjs/renderer/webgl';
Config.rendererOptions = {
renderEngine: WebGlCoreRenderer,
fontEngines: [SdfTextRenderer],
deviceLogicalPixelRatio: window.innerHeight / 1080,
devicePhysicalPixelRatio: 1,
boundsMargin: 100,
targetFPS: 0,
};Canvas
import { Config } from 'svelte-tv';
import {
CanvasCoreRenderer,
CanvasTextRenderer,
} from '@lightningjs/renderer/canvas';
Config.rendererOptions = {
renderEngine: CanvasCoreRenderer,
fontEngines: [CanvasTextRenderer],
deviceLogicalPixelRatio: window.innerHeight / 1080,
devicePhysicalPixelRatio: 1,
};Recommended WebGL Defaults
Config.rendererOptions = {
renderEngine: WebGlCoreRenderer,
fontEngines: [SdfTextRenderer],
fpsUpdateInterval: 1000,
textureMemory: {
criticalThreshold: 200e6,
targetThresholdLevel: 0.8,
},
numImageWorkers: 4,
deviceLogicalPixelRatio: window.innerHeight / 1080,
devicePhysicalPixelRatio: 1,
createImageBitmapSupport: 'auto',
boundsMargin: 100,
targetFPS: 0,
enableClear: false,
};For the full list of global options, see Config.