ShapeWithCrop • tldraw Docs

A shape type that supports cropping functionality.

This type represents any shape that can display cropped content, typically media shapes like images and videos. The shape has width, height, and optional crop parameters. When crop is null, the entire asset is displayed.

type ShapeWithCrop = TLBaseShape<
  string,
  {
    crop: null | TLShapeCrop
    h: number
    w: number
  }
>

Example

// An image shape with cropping
const croppedImageShape: ShapeWithCrop = {
  id: 'shape:image1',
  type: 'image',
  x: 100,
  y: 200,
  // ... other base shape properties
  props: {
    w: 300,
    h: 200,
    crop: {
      topLeft: { x: 0.1, y: 0.1 },
      bottomRight: { x: 0.9, y: 0.9 },
    },
  },
}

// A shape without cropping (shows full asset)
const fullImageShape: ShapeWithCrop = {
  // ... shape properties
  props: {
    w: 400,
    h: 300,
    crop: null, // Shows entire asset
  },
}