Prototypes EaselP28 · Whiteboard
How Easel is built
  1. The board is drawn on a canvas, not with one element per shape. A spatial index cuts the page into squares of 256 units and lists each shape in the squares it covers, so a frame draws only the shapes under the screen and finding the shape under the pointer reads a few of them. Far out, words become gray bars and a shape smaller than two pixels becomes a dot.
  2. Each shape is drawn as a short list of parts: SVG paths, lines of text and pictures. The canvas draws the paths with Path2D, which reads the same path strings, and the SVG export writes them into the file, so the export looks like the screen.
  3. An arrow end attached to a shape keeps a place inside that shape. When the shape moves, the arrow is drawn again from that place, and it stops a few units short of the outline where the line crosses it. The crossing is found by halving the line until it is exact, so it holds for rectangles, ellipses and diamonds, turned or not.
  4. The pen keeps each point with its pressure. A mouse has no pressure, so the stroke takes it from the speed: a fast line is thinner. The points are pulled toward the line they make, the ends taper, and the outline is closed with round caps.
  5. A moving shape snaps to the edges and middles of the shapes on screen, within six pixels, and the guides show what it snapped to. ⌘ turns it off.
  6. Each shape is a map of its fields in a Yjs document, so two people who change different fields of one shape both keep their change. The order front to back is a string per shape that sorts, so two people who reorder at once do not rewrite each other’s shapes.
  7. The document is encrypted in the browser with the key in the link after the #, and P14’s relay passes on what it cannot read. A drag is shown on your screen at once and written to the document twenty times a second. Pointers, selections, ink being drawn and the laser go as presence, which is encrypted too and is not kept.
  8. Undo takes back only your own changes. A whole drag is one step, and the selection comes back with it.