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.

Important

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:

// Creating the canvas context enters "canvas rendering" mode
const ctx = screen.getContext('2d');
 
// The default background color is black, so draw the house as white
ctx.fillStyle = 'white';
ctx.strokeStyle = 'white';
 
// Set line width
ctx.lineWidth = 10;
 
// Wall
ctx.strokeRect(75, 140, 150, 110);
 
// Door
ctx.fillRect(130, 190, 40, 60);
 
// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

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.

Example

import React, { useState, useEffect } from 'react';
import { Rect } from 'react-tela';
import { render } from 'react-tela/render';
 
function App() {
	const [rotate, setRotate] = useState(0);
 
    useEffect(() => {
        let id: number;
        function update() {
            id = requestAnimationFrame(update);
            setRotate(r => r += 1);
        }
        update();
        return () => cancelAnimationFrame(id);
    }, []);
 
	return (
		<Rect
			fill='green'
			rotate={rotate}
			width={100}
			height={70}
			x={200}
			y={200}
		/>
	);
}
 
render(<App />, screen);

Canvas

Example

Using React

Example

Learn more

Learn about drawing images with the Canvas API

Learn about using custom fonts with the Canvas API

On this page