One context

No. 35 · Early example

The print head: the one WebGL2 contextA tile: one pane's own 2D canvasJust stamped by copyTo()A plotter with one print head and 16 tiles. Each tile is a pane’s own 2D canvas, holding one of five shapes <Glass> knows at its default size. The head is the WebGL2 context shared() makes once, on a canvas that never joins the page; its 16 dots are the 16 stages it keeps, one per pane, seven render targets each. For each pane the head renders, then lowers and stamps: copyTo() draws the context’s pixels into that pane’s canvas, and the canvas keeps them until the next stamp. I’ve slowed it down; on a real page every pane that needs a new picture does this in its own frame callback, one after another, inside a single frame.

A plotter with one print head and sixteen tiles: a single WebGL2 context renders each pane in turn, then lowers and stamps its pixels into that pane’s own canvas.

Drawn while the skill was being made, for a long article on rendering frosted panes in WebGL.

Install

npm install anatomy-figures

In your code

page.tsx

import { OneContext } from "anatomy-figures";

<OneContext theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import OneContext from "anatomy-figures/one-context";

Theme it

Early examples keep their own light and dark palettes: theme picks one, and --anatomy-card sets the ground.

page.tsx

<OneContext
  theme="dark"
  tokens={{ "--anatomy-card": "#000000" }}
/>

Without React

It still draws with React inside, so install react and react-dom next to it.

index.html

import { define } from "anatomy-figures/element/one-context";

define();

<anatomy-one-context theme="light"></anatomy-one-context>