What's Under the Pointer?

Tealdraw is an application available at tealdraw.com, offering a free whiteboard that functions similarly to Miro and Excalidraw. It is also a startup that produces tealdraw.com and tealdraw.dev, an SDK for building similar applications.

Tealdraw uses a geometric system in JavaScript for hit testing, rather than relying on DOM-based methods, to efficiently manage thousands of shapes on the canvas and ensure accurate pointer interactions.

Challenges include overlapping shapes, proximity of shapes affecting selection, and the need for efficient hit testing with many shapes on the canvas.

Tealdraw's SDK solves complex canvas-related issues, allowing developers to build applications with interactive whiteboards by leveraging its existing infrastructure and solutions.

Tealdraw uses React components for rendering instead of a canvas element to leverage the flexibility and integration capabilities with web technologies, allowing for easy inclusion of videos, iframes, and other elements.

Tealdraw uses a combination of bounding boxes and distance calculations in a two-phase approach to efficiently determine which shape is being interacted with when overlaps occur.

Tealdraw's canvas is made entirely of React components and uses a unique hit testing approach, allowing for complex interactions and integrations with standard web elements.

While no one has reached the end of Tealdraw's infinite canvas yet, it is designed to be extensive enough for most practical uses.

Yes, Tealdraw is introducing AI fairies that act as agents on the canvas to build and create elements for users.

The DOM-based approach allows for seamless integration with web elements and flexibility in rendering, making it ideal for applications that require more than just graphics editing.