Documentation Index
Fetch the complete documentation index at: https://mintlify.com/tldraw/tldraw/llms.txt
Use this file to discover all available pages before exploring further.
Asset utilities provide functions for manipulating images, sizing boxes, and loading fonts in tldraw applications.
containBoxSize
Contains a size within a given box size while maintaining aspect ratio.
function containBoxSize(
originalSize: BoxWidthHeight,
containBoxSize: BoxWidthHeight
): BoxWidthHeight
The original size of the asset with w and h properties.
The container size to fit within.
Example
const originalSize = { w: 1920, h: 1080 }
const containerSize = { w: 800, h: 600 }
const fitted = containBoxSize(originalSize, containerSize)
// Result: { w: 800, h: 450 }
downsizeImage
Resize an image Blob to be smaller than its current size with high quality.
async function downsizeImage(
blob: Blob,
width: number,
height: number,
opts?: { type?: string; quality?: number }
): Promise<Blob>
The image Blob to resize.
The desired width in pixels.
The desired height in pixels.
The MIME type for the output image. Defaults to the input blob’s type.
The image quality from 0 to 1. Defaults to 0.85.
Example
const image = await (await fetch('/image.jpg')).blob()
const size = await getImageSize(image)
const resizedImage = await downsizeImage(
image,
size.w / 2,
size.h / 2,
{ type: 'image/jpeg', quality: 0.85 }
)
preloadFont
Preload a font face and add it to the document fonts.
async function preloadFont(
id: string,
font: TLTypeFace
): Promise<FontFace>
The font family identifier.
The font configuration object.
TLTypeFace interface
interface TLTypeFace {
url: string
display?: FontDisplay
featureSettings?: string
stretch?: string
style?: string
unicodeRange?: string
variant?: string
weight?: string
format?: string
}
Example
const fontFace = await preloadFont('MyFont', {
url: 'https://example.com/fonts/myfont.woff2',
weight: '400',
style: 'normal',
format: 'woff2'
})
// Font is now available for use