terminal
protocol
sdk
internals
performance
git license
tests glitch
ctx is a renderer and serialization format for 2D vector graphics, aiming for compatibility with HTML5 Canvas' 2D context. It leverages portable C code and auto-vectorization capabilities of modern compilers to target everything from microcontrollers to color managed RGB and CMYK compositing with 32bit floating point.
The motivation behind ctx was having a portable vector graphics library with a serialization protocol for use in a terminal emulator, while also covering the needs of GIMP and GEGL. To keep resource usage down; the prototyping platforms for ctx has been microcontrollers with SPI displays which is how it ended up in the firmwares of the following hacker-camp badges: card10, flow3r and tildagon.
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 renderingT 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.
Pixel encodings supported range from 1bit to 32bit per pixel, in grayscale, RGB and CMYK. ctx can renders to lower bitdepth RGB332, RGB565 variants as well as 1,2 and 4 bit per pixel grayscale is handled.
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 | |||||
| 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 missing:
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.
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.