Inset canvas

Move the .tl-canvas element so it no longer fills the Tldraw container.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import './inset-canvas.css'

export default function InsetCanvasExample() {
	return (
		<div className="tldraw__editor tldraw__editor-with-inset-canvas">
			<Tldraw />
		</div>
	)
}

Normally the canvas fills the whole Tldraw container and the UI floats over it. This example uses CSS to shrink and center the .tl-canvas element to the middle 50% of the container, leaving the UI where it was. Pointer positions, hit testing, and the camera still line up correctly because the editor measures the canvas element itself, not its container.

This is an unusual layout; the point of the example is to show that if you need to reposition the canvas within the editor's chrome, you can do it with CSS alone.

Is this page helpful?
Prev
Inset editor (common practices)
Next
Scrollable container