Rendering
Rendering modes for nx.js applications
There are two different rendering modes available for nx.js applications: console rendering or canvas rendering.
Console Rendering
Console rendering mode is useful for text-based applications, which do not require complex graphics or animations.
To use console rendering mode, use the functions available on the global console object to print text to the console:
console.log('Hello World');The console is rendered as a fully-featured, themeable terminal (ANSI colors, UTF-8, and scrollback) drawn with the Canvas API.
Canvas Rendering
Canvas rendering mode is useful for graphical user interfaces and games. It allows you to draw to the screen using the web Canvas API, which provides a low-level interface for drawing shapes, images, and text to the screen.
To use canvas rendering mode, invoke the screen.getContext() function to get access to a canvas rendering context:
const ctx = screen.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);WebGL2
The "webgl2" rendering context is also supported, providing hardware-accelerated
3D rendering via the WebGL2 API
backed by a real OpenGL ES 3 context on the Switch GPU:
const gl = screen.getContext('webgl2');
gl.clearColor(0, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);A canvas may only have one context kind: once a "2d" context has been
acquired by the application, getContext('webgl2') returns null (and vice
versa).
WebGL2 requires application mode (launching hbmenu via title override,
or an installed NSP — the full memory grant). In applet mode (launched
from the Album) there is not enough memory for the GL driver, so
getContext('webgl2') returns null. Always check for null and handle it
(e.g. show a message via console.log()).
The "webgl" (WebGL 1) context is not currently implemented — target
"webgl2" instead, which is a superset of its functionality. WebGL
extensions are also not yet implemented (getExtension() returns null),
though most WebGL1-era extension features are part of WebGL2 core.