/** * Background Renderer * * Handles rendering of element backgrounds including: * - Background colors * - Background images (URL) * - Linear gradients * - Radial gradients * - Background patterns and repeats */ import { Context } from '../../core/context'; import { ElementContainer } from '../../dom/element-container'; /** * Dependencies required for BackgroundRenderer */ export interface BackgroundRendererDependencies { ctx: CanvasRenderingContext2D; context: Context; canvas: HTMLCanvasElement; options: { width: number; height: number; scale: number; }; } /** * Background Renderer * * Specialized renderer for element backgrounds. * Extracted from CanvasRenderer to improve code organization and maintainability. */ export declare class BackgroundRenderer { private readonly ctx; private readonly context; private readonly canvas; /** * Instance-level LRU cache for background-image patterns. * CanvasPatterns are tied to the rendering context and must not be * shared across different render passes. This cache lives for the * duration of one html2canvas() call. */ private readonly patternCache; constructor(deps: BackgroundRendererDependencies); /** * Render background images for a container * Supports URL images, linear gradients, and radial gradients * * @param container - Element container with background styles */ renderBackgroundImage(container: ElementContainer): Promise; /** * Render a URL-based background image */ private renderBackgroundURLImage; /** * Render a repeating linear gradient background. * Renders one cycle of the gradient to a pattern canvas, then fills * the background area using createPattern('repeat'). */ private renderRepeatingLinearGradient; /** * Render a linear gradient background */ private renderLinearGradient; /** * Render a radial gradient background */ private renderRadialGradient; /** * Render a repeating radial gradient. * * Canvas radial gradients have no native repeat mode, so the stop list is * stacked: with period p (the last stop position) the stops are re-added * k*p + s for k = 0..ceil(radius / p) - 1, clipped to the [0, 1] gradient * range. The full repeating gradient is then rasterised with the same * ellipse pattern trick as the plain radial renderer. */ private renderRepeatingRadialGradient; /** * Render a conic gradient. * * Color stops are angular: percentages of the full 360° sweep, normalised * by processing against a line length of 1. Canvas createConicGradient * measures its start angle in the same clockwise-from-12-o'clock space as * CSS `from `. */ private renderConicGradient; /** * Render a repeating conic gradient background. * * Canvas conic gradient stops span the full 2π sweep as [0, 1], so the * one-cycle stop list is stacked k·period + s for k = 0..cycles-1 over the * whole sweep — the same periodic-stop stacking the repeating linear and * radial renderers use along their gradient lines. */ private renderRepeatingConicGradient; /** * Render a repeating pattern with offset * * @param path - Path to fill * @param pattern - Canvas pattern or gradient * @param offsetX - X offset for pattern * @param offsetY - Y offset for pattern */ private renderRepeat; /** * Resize an image to target dimensions * * @param image - Source image * @param width - Target width * @param height - Target height * @param imageRendering - CSS image-rendering property value * @returns Resized canvas or original image */ private resizeImage; /** * Create a canvas path from path array * * @param paths - Array of path points */ private path; }