Skip to content
G.

systems lab / 03

Canvas Packet Field

Separate simulation time from browser paint time while hundreds of reusable packet objects move through one inspectable system.

scenario 01 · simulated traffic + measured renderer

What changes when the object count becomes dense?

Start the seeded field, change its load and loss, select one packet, and inspect pool pressure. Traffic outcomes are simulated; FPS, draw cost, dimensions, and pixel ratio are measured in your browser.

experiment controls

Shape the simulated traffic

paused

Traffic model settings

Paused after a deterministic 2.5-second warm-up. Play continuously or step one fixed tick.

The packet field needs Canvas support. The lane telemetry table below exposes the same simulation as text.
Rectangles are in-flight packets; amber rectangles are deterministically scheduled to drop, and an × marks the drop. Click a packet or use “Inspect next packet” for the keyboard-equivalent inspector.

Browser telemetry

measured
render loop
paused
average draw
0.00 ms
display DPR
1.00×
render DPR
1.00×
CSS width
0 px
CSS height
0 px

FPS and draw cost come from this browser. The backing store is capped at 2× DPR to bound fill work on very dense displays.

Traffic counters

simulated
active
411
emitted
450
delivered
34
dropped
6
fixed ticks
150
sim time
2.5 s

These values come from a conceptual seeded model, not real network traffic or a packet capture.

Lane state

Structured text alternative for the Canvas routes and outcomes.

Active, delivered, and dropped packet counts by service lane
LaneDestinationActiveDeliveredDropped
APIapi-017242
Jobsqueue-0281111
Cachecache-019351
Searchindex-039561
Storedb-027081

Build notes

Separate simulation time from paint time

Canvas makes dense drawing cheap, but gives up the retained semantic objects SVG provides. This lab keeps those concerns separate: one deterministic model, one immediate-mode renderer, and structured HTML for everything a visitor needs to inspect.

  • Architecture

    A browser-free seeded engine owns traffic state and a fixed-capacity packet pool. A route-scoped Client Component owns requestAnimationFrame, Canvas drawing, ResizeObserver, pointer hit testing, and low-frequency React snapshots.

  • Tradeoff

    Rendering follows the display clock, but simulation advances in fixed 1/60-second ticks. Catch-up is capped at eight ticks per frame, favoring a responsive page over perfectly replaying an arbitrarily long stall.

  • Limitation

    Packets, service lanes, rates, loss, and outcomes are conceptual teaching data—not real traffic, protocol fields, latency measurements, or a packet capture. The model intentionally omits queues and congestion control.

  • Performance

    The engine preallocates 1,200 mutable packet records and reuses them. Canvas DPR is capped at 2×, the loop stops while paused, hidden-tab delta is discarded, and continuous playback telemetry is throttled to four React updates per second.