enableDirtyRegionRendering

How enableDirtyRegionRendering decides what to draw, and the measured speed, is in the Rendering many objects guide.

import {
  batchCanvasUpdates,
  createPerformanceMonitor,
  createSpatialIndex,
  enableDirtyRegionRendering,
} from "fabricjs-document-engine/performance";

enableDirtyRegionRendering

function enableDirtyRegionRendering(canvas: StaticCanvas, options?: DirtyRegionOptions): DirtyRegionRenderer

Redraws only what changed on a canvas. Exports always draw in full.

Name	Type	Default	Description
fullRedrawRatio	number	0.4	Draw the whole canvas when the changed area is larger than this share of it.
maxRegions	number	4	Most rectangles to clip to; more are merged.
cellSize	number	256	Cell size of the grid index, in canvas units.

Name	Type	Default	Description
invalidate*	(): void	—	Draws the next frame in full, for changes made inside a custom object's `_render`.
stats*	(): DirtyRegionStats	—	Counts and the regions of the last frame.
disable*	(): void	—	Puts Fabric's rendering back.

Name	Type	Default	Description
frames*	number	—	Frames drawn since enabled.
fullFrames*	number	—	Frames drawn in full.
skippedFrames*	number	—	Frames where nothing changed, so nothing was drawn.
lastObjectsDrawn*	number	—	Objects drawn in the last frame.
lastAreaRatio*	number	—	Share of the canvas drawn in the last frame, 0 to 1.
lastRegions*	Rect$1[]	—	The rectangles drawn in the last frame, in canvas pixels.

createPerformanceMonitor

function createPerformanceMonitor(canvas: StaticCanvas, options?: PerformanceMonitorOptions): PerformanceMonitor

Records frame times and objects drawn for a canvas.

Name	Type	Default	Description
samples	number	120	How many recent frames to keep.

Name	Type	Default	Description
stats*	(): FrameStats	—	Frame times and objects drawn.
reset*	(): void	—	Forgets the recorded frames.
stop*	(): void	—	Stops recording.

Name	Type	Default	Description
frames*	number	—	Frames recorded, up to `samples`.
averageMs*	number	—	Average frame time.
p50Ms*	number	—	Median frame time.
p95Ms*	number	—	95th percentile frame time: the slow frames users notice.
worstMs*	number	—	Slowest frame.
lastObjectsDrawn*	number	—	Objects drawn in the last frame.

batchCanvasUpdates

function batchCanvasUpdates<Result>(canvas: StaticCanvas, work: () => Result): Result

Runs many adds and changes with one render at the end. Nests and works with async work.

createSpatialIndex

function createSpatialIndex<Item>(options?: SpatialIndexOptions): SpatialIndex<Item>

A grid index for finding items near a rectangle.

Name	Type	Default	Description
cellSize	number	256	Grid cell size in canvas units.
maxCellsPerItem	number	64	Items covering more cells than this go in a list every query returns.

Name	Type	Default	Description
set*	(item: Item, bounds: Rect): void	—	Adds an item, or moves it.
delete*	(item: Item): boolean	—	Removes an item.
has*	(item: Item): boolean	—	Whether the item is indexed.
query*	(bounds: Rect): Set<Item>	—	Items whose bounds may meet the rectangle.
clear*	(): void	—	Removes every item.
size*	number	—	How many items are indexed.

The renderer from enableDirtyRegionRendering uses this same index with a cell size of 256. Call the renderer's disable() before you dispose of the canvas.

Performance API