The signature takes a React.PointerEvent<HTMLElement> — React's wrapper around the browser's native pointerdown event, which fires the instant the mouse button (or a touch, or a stylus) goes down over the canvas. This one function is wired to the canvas's onPointerDown prop, so it is the single front door every rectangle-drag, click-to-select, and shape tool interaction passes through.

viewportCoordsToSceneCoords immediately converts the event's pixel position — relative to the browser viewport, and therefore dependent on however much the canvas is currently scrolled or zoomed — into scene coordinates, the fixed coordinate space every ExcalidrawElement's x/y is stored in. This is the first translation from 'raw event' to 'editor data': everything downstream, from the element factory to the renderer, works in scene space, never viewport pixels.

target.setPointerCapture(event.pointerId) locks all subsequent pointermove/pointerup events for this pointerId onto the element that received the pointerdown — like a walkie-talkie channel that stays locked to whoever keyed it first. Without it, dragging fast enough to slide the cursor over a toolbar button mid-drag would start delivering move events to that button instead of the canvas. Because of the capture, every event for the rest of this drag keeps arriving at the same handler no matter where the cursor physically wanders.

pointerDownState.origin.x/y — the scene coordinates captured at the moment of pointer-down — get snapped to the nearest grid point via getGridPoint, unless the user holds Ctrl/Cmd to bypass snapping. This is where the exact pixel the user clicked turns into the coordinate the new element is actually born at.

baseElementAttributes gathers every 'current tool' style setting living in App's own state — stroke color, background, fill style, roughness, opacity — plus the snapped x/y, into one plain options object. Bundling the app-specific state here means the factory function itself stays generic and never needs to know anything about App.

This is the actual factory call. For any non-embeddable tool — rectangle included — newElement({ type: elementType, ...baseElementAttributes }) calls into newElement.ts, which returns a plain JavaScript object: an id, x/y/width/height, style fields, a version and seed for later diffing — no class, no methods, just data. That plainness is exactly why the same value can be handed to the Scene, mutated at a low level, diffed by the Store, and read by the Renderer without any of those layers needing to know about each other's types.

If the active tool is 'selection', the element is only ever kept as an ephemeral this.state.selectionElement — a rubber-band box that's never committed anywhere. For a real shape like our rectangle, this.insertNewElement(element) runs instead: this is the handoff out of App's tool logic and into the Scene, where the element actually becomes part of the drawing. The following setState({ newElement: element }) is just bookkeeping that lets the live in-progress rectangle keep redrawing as the user drags.

getVisibleCanvasElements takes the full elementsMap plus the viewport-describing slice of AppState — zoom, scroll offsets, canvas width/height — everything needed to know what's actually on screen right now, as opposed to what merely exists in the Scene.

It loops over every element and keeps only the ones isElementInViewport reports as intersecting the current viewport — like a bouncer at a door, checking each element's bounds against the camera frame before letting it through to be drawn. This runs on every render, including every pointer-move while the rectangle is still being dragged, so keeping it a cheap loop over plain data (remember: elements are just plain objects) matters — there's no virtual-DOM diffing per element here.

The filtered list comes back up through Renderer.getRenderableElements, which App.render() calls on every React render and passes down as the visibleElements prop to <StaticCanvas>. StaticCanvas's effect calls renderStaticScene, which — since render throttling is enabled by default — delegates to renderStaticSceneThrottled, a requestAnimationFrame-throttled function that collapses any number of calls within one frame into a single actual paint. So the chain from Scene.replaceAllElements's triggerUpdate to pixels on screen is: Scene notifies → React re-renders → Renderer recomputes visible elements → StaticCanvas schedules, at most once per frame, the pass that paints the rectangle.