bit Bink

A native drawing and ink engine for Blazor. The stroke model, smoothing, pressure response, hit testing, undo, serialization and export are all written in C#. JavaScript only collects pointer events and replays a command buffer onto a canvas.

What it is for

Signature

A signature field with pressure-aware ink, undo and vector export that stays sharp at any size.

Handwriting

A note-taking surface tuned for fast writing, with pen pressure, tilt and palm rejection.

Whiteboard

Pens, markers, highlighters, shapes, text, selection, layers, pan and zoom.

Diagram surface

Nodes and connectors that stay attached when you move things, on a snapping grid.

Image annotation

Drop in a screenshot, mark it up with arrows and highlights, export a flattened PNG.

Document review

Text highlights, callouts and freehand notes over a document surface.

Collaboration

Two canvases synchronizing through operations, with live cursors and remote ink.

Under the hood

Serialization

Save, inspect, edit and reload the vector document, and see what each format costs in bytes.

Performance

Generate thousands of strokes and time geometry, redraw, hit testing, save, load and export.

How it is built

Pointer events (browser)
  -> batched once per animation frame
  -> BinkStrokeBuilder        spacing filter, streamline smoothing, pressure
  -> BinkStroke + BinkBrush   immutable vector model
  -> BinkDrawingOperation     the unit of undo, diffing and collaboration
  -> BinkDocument             layers of elements
  -> IBinkRenderContext       canvas commands, SVG, or the built-in rasterizer

One rendering path serves the screen, SVG export and PNG export, so the exported file always matches what was drawn. Pointer input never triggers a Blazor render: samples arrive once per frame, the active tool processes them, and only the affected canvas layer is redrawn.

In WebAssembly the command buffer reaches JavaScript as a view over managed memory, so a redraw costs one interop call and no serialization. In Blazor Server the same engine runs on the server and a lightweight trail is drawn locally while each batch is in flight, so the pen still feels attached to the hand.

Get started

dotnet add package Bit.Bink

@using Bit.Bink

<BinkCanvas Height="400px" />

The stylesheet is added by the package's JavaScript initializer, so there is nothing to put in the host page. The source code, the documentation and the code of this demo are on GitHub.