import { ElementPaint, StackingContext } from '../stacking-context'; import { Color } from '../../css/types/color'; import { ElementContainer } from '../../dom/element-container'; import { Path } from '../path'; import { BoundCurves } from '../bound-curves'; import { ReplacedElementContainer } from '../../dom/replaced-elements'; import { SurfaceBudget } from './surface-bounds'; import { Context } from '../../core/context'; export type RenderConfigurations = RenderOptions & { backgroundColor: Color | null; signal?: AbortSignal; /** * Enable/disable image smoothing (anti-aliasing). * When disabled, images are rendered with pixel-perfect sharpness (no interpolation). * CSS `image-rendering` property on individual elements takes precedence. * @default browser default (usually true) */ imageSmoothing?: boolean; /** * Image smoothing quality level when imageSmoothing is enabled. * Higher quality may be slower for large images. * Only supported in modern browsers (Chrome 54+, Firefox 94+, Safari 17+). * Falls back gracefully in older browsers. * @default browser default */ imageSmoothingQuality?: 'low' | 'medium' | 'high'; }; export interface RenderOptions { scale: number; canvas?: HTMLCanvasElement; x: number; y: number; width: number; height: number; } export declare class CanvasRenderer { private readonly surfaceRoot?; private readonly surfaceBudget; canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D; private readonly context; private readonly options; private readonly backgroundRenderer; private readonly borderRenderer; private readonly borderImageRenderer; private readonly effectsRenderer; private readonly textRenderer; private readonly textClipRenderer; private legacySubtree; constructor(context: Context, options: RenderConfigurations, surfaceRoot?: ElementPaint | undefined, surfaceBudget?: SurfaceBudget); renderStack(stack: StackingContext): Promise; private canComposite; private renderCompositedStack; /** * Composite an alpha mask onto a finished element surface: all mask * layers are painted additively into a mask surface, then kept pixels are * selected with destination-in. */ private applyMask; /** * Mirror the element surface in the given direction and offset, optionally * masked (the -webkit-box-reflect mask applies in element space, so it is * composited in the mirrored space where the reflection was drawn). */ private drawReflection; renderNode(paint: ElementPaint): Promise; /** * Helper method to render text with paint order support * Reduces code duplication in line-clamp and normal rendering */ renderReplacedElement(container: ReplacedElementContainer, curves: BoundCurves, image: HTMLImageElement | HTMLCanvasElement): void; renderNodeContent(paint: ElementPaint): Promise; renderStackContent(stack: StackingContext): Promise; path(paths: Path[]): void; formatPath(paths: Path[]): void; private renderSurfaceBoxShadow; renderNodeBackgroundAndBorders(paint: ElementPaint): Promise; /** * Draw the element outline: a single closed stroke around the border box, * offset outwards. Outlines paint atop content and do not affect layout. */ private renderOutline; /** * Rasterise a gradient border-image-source across the border image area. * CSS allows any as the border-image source; gradients are painted * over the whole border-image box and then sliced by the regular 9-slice * pipeline, matching browser behaviour for `border-image: linear-gradient()`. * Returns null when the gradient could not be painted. */ private rasterizeGradientSource; /** * Filter the already-painted content beneath the element's border box and * paint the result back, approximating CSS backdrop-filter for the chain * subset the filter surface backends support. */ private renderBackdropFilter; render(element: ElementContainer): Promise; }