Geometry primitives overview

Core geometry primitive classes for 2D calculations in the tldraw SDK

The tldraw SDK provides a set of geometry primitive classes for working with 2D shapes, vectors, and bounding boxes. These primitives form the foundation for shape calculations, hit testing, and spatial operations.

Core primitives

Vec

The Vec class represents a 2D vector with x, y, and optional z (pressure) components. It provides extensive methods for vector math operations.

import { Vec } from 'tldraw'

const point = new Vec(100, 200)
const moved = point.add(new Vec(10, 20))

See the Vec class reference for detailed documentation.

Box

The Box class represents an axis-aligned bounding box with position (x, y) and dimensions (w, h). It provides methods for box manipulation, collision detection, and spatial queries.

import { Box } from 'tldraw'

const box = new Box(0, 0, 100, 200)
const center = box.center
const expanded = box.clone().expandBy(10)

See the Box class reference for detailed documentation.

Geometry2d shapes

The Geometry2d class hierarchy provides specialized 2D geometry shapes for hit testing, intersection detection, and spatial calculations. These shapes are used internally by shape utilities.

import { Circle2d, Rectangle2d, Polygon2d } from 'tldraw'

const circle = new Circle2d({
  radius: 50,
  isFilled: true
})

const rect = new Rectangle2d({
  width: 100,
  height: 50,
  isFilled: true
})

See the Geometry2d shapes reference for detailed documentation.

Common use cases

Vector operations

import { Vec } from 'tldraw'

// Create vectors
const a = new Vec(10, 20)
const b = new Vec(30, 40)

// Basic operations
const sum = Vec.Add(a, b)
const diff = Vec.Sub(a, b)
const scaled = Vec.Mul(a, 2)

// Distance and angle
const distance = Vec.Dist(a, b)
const angle = Vec.Angle(a, b)

// Interpolation
const midpoint = Vec.Lrp(a, b, 0.5)

Bounding box operations

import { Box } from 'tldraw'

// Create from points
const points = [new Vec(0, 0), new Vec(100, 50), new Vec(50, 100)]
const bounds = Box.FromPoints(points)

// Collision detection
const box1 = new Box(0, 0, 100, 100)
const box2 = new Box(50, 50, 100, 100)
const collides = box1.collides(box2) // true

// Point containment
const point = new Vec(25, 25)
const contains = box1.containsPoint(point) // true

Hit testing

import { Circle2d } from 'tldraw'

const circle = new Circle2d({
  x: 0,
  y: 0,
  radius: 50,
  isFilled: true
})

// Test if point is inside
const point = new Vec(25, 25)
const isHit = circle.hitTestPoint(point, 0, true)

// Find nearest point on edge
const nearest = circle.nearestPoint(new Vec(100, 0))

Type definitions

VecLike

A type that accepts either a Vec instance or a plain object with x/y coordinates:

type VecLike = Vec | { x: number; y: number; z?: number }

BoxLike

A type that accepts either a Box instance or a plain object with box properties:

type BoxLike = Box | { x: number; y: number; w: number; h: number }

Related

• Vec class
• Box class
• Geometry2d shapes