terminal protocol sdk uctx rasterizer compositing performance
git license
mcu tests glitch

compact, portable and performant 2D vector graphics

ctx is an implementation and serialization format of HTML5 Canvas' 2D context, with a configurable build making it scale from microcontroller user interfaces with embedded fonts to 32bit floating point RGBA and CMYKA compositing for use in GIMP. Demo UIs experiments and tests are included in the git monorepo. The most elaborate test is s0il a graphical UNIX like OS for microcontrollers, with interpreted userland. and Petal Hero for the flow3r badge/instrument.

ctx as an interactive 2D vector graphics protocol provides remote backends and process multiplexing integrated with a terminal emulator/window manager; providing an end-to-end vector rendering framework suitable for serial links. The serialization of the rendering model is a superset of SVG path d attribute syntax. Internally (as well as for backends extending ctx; by appearing after the CTX_IMPLEMENTATION), a compact binary serialization of this syntax is used.

The ctx rasterizer is fast, portable and compact with a wide range of supported pixel encodings from 1bit to 32bit per pixel, in grayscale, RGB and CMYK. For microcontrollers using C or micropython. ctx renders to lower bitdepth RGB332, RGB565 variants as well as 1,2 and 4 bit per pixel grayscale is handled. Combined with floating point pixel encoding support and color management ctx scales to meet GEGL and GIMPs needs.

x86-64

Runtime choice of 3 different levels of SIMD support.

arm32

both mcu and cpu's tested on rp2040

tensilica

tested on esp32 and esp32s3

riscv

tested on esp32c3

wasm

built with emscripten

?

if it is a 32bit or 64bit arch; with a C compiler it probably works.

The interactive backends of ctx are tailored towards low latency rendering of UIs where only a part of the screen changes, like editing text in a terminal or changing the hover state of a button. Ctx records the drawing commands to draw a frame, and before starting to draw computes a hash for a 6x5 grid dividing the buffer being rendered to. Horizontal chunks of tiles with new hashes compared to the previous frame are then scheduled for rendering on threads.

The ctx API still isn't fully covered by the rasterizer, in this feature comparison matrix, the protocol and rasterizer are separate columns.

.	ctx-protocol	ctx	cairo	skia	blend2d
GPU rendering		N	N	Y	N
threaded rendering		Y	N	N	Y
automatic partial redraws		Y	N	N	N
event-handling		Y
color management 8bit		Y	N	Y	N
color management float		P	N	N	N
pcm-audio		Y
shadow blur	Y	Y	N	Y	N
inner shadow	N	N	N	Y	N
stroke-join-miter	Y	N	Y	Y	Y
stroke-end-square	Y	P	Y	Y	Y
stroke-dash	Y	Y	Y	Y	N
stroke-join-round	Y	Y	Y	Y	Y
stroke-end-round	Y	Y	Y	Y	Y
clipping	Y	Y	Y	Y	N
compositing-groups	Y	P	Y	Y	N
blending-modes	Y	P	Y	Y	Y
text	Y	Y	Y	Y	Y
perspective-transform textures	Y	Y	N	?	N
perspective-transform paths	Y	Y	N	?	N
linear-gradient	Y	Y	Y	Y	Y
radial-gradient	Y	P	Y	Y	Y
conic-gradient	Y	Y	N	Y	Y
mesh-gradient	N	N	Y	?	?
cmyk-gradients	Y	N
bilinear textures	Y	Y	Y	Y	Y
nearest textures	Y	Y	Y	Y	Y
Rendering targets
PDF		P	Y	Y
RGBA		Y	Y	Y	Y
RGB30		N	Y	?	N
RGB332		Y	N	?	N
RGB565		Y	Y	?	N
RGBA float		Y	N	N	N
GRAY8		Y	Y	Y	Y
GRAYA8		Y	?	?	?
gray 1 bit		Y	Y	N	N
gray 2 bit		Y	N	N	N
gray 4 bit		Y	N	N	N
GRAY float		Y	N	N	N
GRAYA float		Y	N	N	N
CMYKA		Y	N	N	N

Desired features specified for HTML5 canvas that are desired but missing:

miter-limit

The stroker is currently always beveling strokes, fixing miter limit would also remove some currently hidden interesecting geometry on other parts of strokes.

focal point of radial gradient

correct result for shadow-blur

the SDF approximation is servicable in many cases but not correct.

filters

most importantly blur, but also brightness(),contrast(),grayscale(),hue-rotate(),invert(),opacity(),saturate(),sepia()

fontKerning

kerning is implemented in some of the font backends - but not ability to toggle on/off

direction

fontStretch

fontVariantCaps

letterSpacing

wordSpacing

textRendering

strokeText

Non HTML5-Canvas features desired:

stroke to path

for implementing strokeText

text along path baseline

text to path

ctx provides abstractions for event injection and dispatch. It provides hit-detection, this allows abstracting over multiple input devices/buttons with a mouse+keyboard abstraction. In the event method callback both absolute and local (At time of callback registration) coordinates are provided. Interactive ctx backends drive event delivery, if you are implementing the callback backend for microcontrollers and external displays you are expected to turn hardware events into interaction events.

The same API can also be used for writing applications that run inside the ctx terminal, which provides escape sequences that enable drawing 2D vector graphics both inline, and for full-window applications taking over the terminal using the ctx protocol, or even on webpages using webassembly, for now single threaded - and without the potential acceleration through reuse of the rasterizer of the HTML5 Canvas.

license and funding

ctx is available under LGPLv3+ you can encourage continued development of ctx and dissimilar technologies by financially supporting me, Øyvind Kolås who is doing independent pro-bono R&D through patreon and similar. If my income through such sources is above 4000USD per month for a year, or if someone does a one time payment of the equivalent amount for the time I invested in ctx over the last few years, ctx could become available under under the ISC license.