Canvas
Drawing to the screen using the Canvas API
nx.js does not implement a full DOM for rendering content to the screen. Instead, it offers the more low-level Canvas API which allows your application to draw to the screen.
The global screen
object is used to create a CanvasRenderingContext2D
instance, at which point the app is in canvas rendering mode.
You should avoid using any console
printing functions when in canvas rendering mode.
Doing so will change the app back to console rendering mode.
Example
Let's draw a simple house with the Canvas API:
This example was adapted from the MDN Canvas tutorial.
Using React
One of the original goals of nx.js was to be able to render homebrew applications using React.
To achieve that goal, react-tela
was created
which uses the Canvas API to render the application's UI. react-tela
is compatible with
web browsers and Node.js, but was specifically designed to work with nx.js.