Canvas Context Mock

/**
 * Fills a rectangle with the current fillStyle
 * @param x - The x-axis coordinate of the rectangle's starting point
 * @param y - The y-axis coordinate of the rectangle's starting point  
 * @param width - The rectangle's width
 * @param height - The rectangle's height
 */
fillRect(x: number, y: number, width: number, height: number): void;

/**
 * Strokes a rectangle with the current strokeStyle
 * @param x - The x-axis coordinate of the rectangle's starting point
 * @param y - The y-axis coordinate of the rectangle's starting point
 * @param width - The rectangle's width
 * @param height - The rectangle's height
 */
strokeRect(x: number, y: number, width: number, height: number): void;

/**
 * Clears the specified rectangular area, making it fully transparent
 * @param x - The x-axis coordinate of the rectangle's starting point
 * @param y - The y-axis coordinate of the rectangle's starting point
 * @param width - The rectangle's width
 * @param height - The rectangle's height
 */
clearRect(x: number, y: number, width: number, height: number): void;

/**
 * Fills the current path with the current fillStyle
 * @param fillRule - Algorithm to determine inside vs outside of path
 */
fill(fillRule?: CanvasFillRule): void;

/**
 * Fills the specified path with the current fillStyle  
 * @param path - Path2D object to fill
 * @param fillRule - Algorithm to determine inside vs outside of path
 */
fill(path: Path2D, fillRule?: CanvasFillRule): void;

/**
 * Strokes the current path with the current strokeStyle
 */
stroke(): void;

/**
 * Strokes the specified path with the current strokeStyle
 * @param path - Path2D object to stroke
 */
stroke(path: Path2D): void;

/**
 * Starts a new path by emptying the list of sub-paths
 */
beginPath(): void;

/**
 * Adds a straight line from current point to the start of current sub-path
 */
closePath(): void;

/**
 * Moves the starting point of a new sub-path to specified coordinates
 * @param x - The x-axis coordinate of the point
 * @param y - The y-axis coordinate of the point
 */
moveTo(x: number, y: number): void;

/**
 * Connects the last point in the sub-path to specified coordinates with a straight line
 * @param x - The x-axis coordinate of the line's end point
 * @param y - The y-axis coordinate of the line's end point
 */
lineTo(x: number, y: number): void;

/**
 * Adds a circular arc to the current path
 * @param x - The x-axis coordinate of the arc's center
 * @param y - The y-axis coordinate of the arc's center
 * @param radius - The arc's radius (must be non-negative)
 * @param startAngle - The angle at which the arc starts in radians
 * @param endAngle - The angle at which the arc ends in radians
 * @param anticlockwise - If true, draws the arc counter-clockwise
 * @throws {TypeError} If fewer than 5 arguments provided
 * @throws {DOMException} If radius is negative
 */
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;

/**
 * Adds an arc to the current path using control points and radius
 * @param x1 - The x-axis coordinate of the first control point
 * @param y1 - The y-axis coordinate of the first control point
 * @param x2 - The x-axis coordinate of the second control point
 * @param y2 - The y-axis coordinate of the second control point
 * @param radius - The arc's radius
 */
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;

/**
 * Adds a quadratic Bézier curve to the current path
 * @param cpx - The x-axis coordinate of the control point
 * @param cpy - The y-axis coordinate of the control point
 * @param x - The x-axis coordinate of the end point
 * @param y - The y-axis coordinate of the end point
 */
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;

/**
 * Adds a cubic Bézier curve to the current path
 * @param cp1x - The x-axis coordinate of the first control point
 * @param cp1y - The y-axis coordinate of the first control point
 * @param cp2x - The x-axis coordinate of the second control point
 * @param cp2y - The y-axis coordinate of the second control point
 * @param x - The x-axis coordinate of the end point
 * @param y - The y-axis coordinate of the end point
 */
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;

/**
 * Adds a rectangle to the current path
 * @param x - The x-axis coordinate of the rectangle's starting point
 * @param y - The y-axis coordinate of the rectangle's starting point
 * @param width - The rectangle's width
 * @param height - The rectangle's height
 */
rect(x: number, y: number, width: number, height: number): void;

/**
 * Adds a rounded rectangle to the current path
 * @param x - The x-axis coordinate of the rectangle's starting point
 * @param y - The y-axis coordinate of the rectangle's starting point
 * @param width - The rectangle's width
 * @param height - The rectangle's height
 * @param radii - Corner radius or array of radii
 */
roundRect(x: number, y: number, width: number, height: number, radii: number | number[]): void;

/**
 * Adds an ellipse to the current path
 * @param x - The x-axis coordinate of the ellipse's center
 * @param y - The y-axis coordinate of the ellipse's center
 * @param radiusX - The ellipse's major-axis radius
 * @param radiusY - The ellipse's minor-axis radius
 * @param rotation - The rotation of the ellipse in radians
 * @param startAngle - The starting angle in radians
 * @param endAngle - The ending angle in radians
 * @param anticlockwise - If true, draws counter-clockwise
 */
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;

/**
 * Fills text with the current fillStyle
 * @param text - The text string to render
 * @param x - The x-axis coordinate of the text's starting point
 * @param y - The y-axis coordinate of the text's starting point
 * @param maxWidth - Optional maximum width for text
 */
fillText(text: string, x: number, y: number, maxWidth?: number): void;

/**
 * Strokes text with the current strokeStyle
 * @param text - The text string to render
 * @param x - The x-axis coordinate of the text's starting point
 * @param y - The y-axis coordinate of the text's starting point
 * @param maxWidth - Optional maximum width for text
 */
strokeText(text: string, x: number, y: number, maxWidth?: number): void;

/**
 * Returns TextMetrics object containing measurements of the specified text
 * @param text - The text string to measure
 * @returns TextMetrics object with text measurements
 */
measureText(text: string): TextMetrics;

/**
 * Draws an image at the specified position
 * @param image - The image source to draw
 * @param dx - The x-axis coordinate of destination's top-left corner
 * @param dy - The y-axis coordinate of destination's top-left corner
 */
drawImage(image: CanvasImageSource, dx: number, dy: number): void;

/**
 * Draws an image scaled to specified size at the specified position
 * @param image - The image source to draw
 * @param dx - The x-axis coordinate of destination's top-left corner
 * @param dy - The y-axis coordinate of destination's top-left corner
 * @param dw - The width to draw the image in the destination canvas
 * @param dh - The height to draw the image in the destination canvas
 */
drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;

/**
 * Draws a portion of an image scaled to specified size at the specified position
 * @param image - The image source to draw
 * @param sx - The x-axis coordinate of the top-left corner of the sub-rectangle of source image
 * @param sy - The y-axis coordinate of the top-left corner of the sub-rectangle of source image
 * @param sw - The width of the sub-rectangle of the source image
 * @param sh - The height of the sub-rectangle of the source image
 * @param dx - The x-axis coordinate of destination's top-left corner
 * @param dy - The y-axis coordinate of destination's top-left corner
 * @param dw - The width to draw the image in the destination canvas
 * @param dh - The height to draw the image in the destination canvas
 */
drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;

/**
 * Adds scaling transformation to the transformation matrix
 * @param x - Scaling factor in the horizontal direction
 * @param y - Scaling factor in the vertical direction
 */
scale(x: number, y: number): void;

/**
 * Adds rotation transformation to the transformation matrix
 * @param angle - The rotation angle in radians
 */
rotate(angle: number): void;

/**
 * Adds translation transformation to the transformation matrix
 * @param x - Distance to move in the horizontal direction
 * @param y - Distance to move in the vertical direction
 */
translate(x: number, y: number): void;

/**
 * Multiplies the current transformation with the specified matrix
 * @param a - Horizontal scaling factor
 * @param b - Horizontal skewing factor
 * @param c - Vertical skewing factor
 * @param d - Vertical scaling factor
 * @param e - Horizontal translation factor
 * @param f - Vertical translation factor
 */
transform(a: number, b: number, c: number, d: number, e: number, f: number): void;

/**
 * Resets the current transformation to the identity matrix and then multiplies with specified matrix
 * @param a - Horizontal scaling factor
 * @param b - Horizontal skewing factor
 * @param c - Vertical skewing factor
 * @param d - Vertical scaling factor
 * @param e - Horizontal translation factor
 * @param f - Vertical translation factor
 */
setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;

/**
 * Resets the current transformation to the identity matrix and then multiplies with specified matrix
 * @param transform - DOMMatrix2DInit object representing the transformation
 */
setTransform(transform?: DOMMatrix2DInit): void;

/**
 * Resets the current transformation to the identity matrix
 */
resetTransform(): void;

/**
 * Gets the current transformation matrix
 * @returns DOMMatrix representing the current transformation
 */
getTransform(): DOMMatrix;

/**
 * Saves the current drawing state to a stack
 */
save(): void;

/**
 * Restores the most recently saved drawing state from the stack
 */
restore(): void;

/**
 * Sets the line dash pattern
 * @param segments - Array of numbers specifying dash and gap lengths
 */
setLineDash(segments: number[]): void;

/**
 * Returns the current line dash pattern
 * @returns Array representing the line dash pattern
 */
getLineDash(): number[];

/**
 * Tests whether the specified point is inside the current path
 * @param x - The x-axis coordinate of the point
 * @param y - The y-axis coordinate of the point
 * @returns True if point is inside the path
 */
isPointInPath(x: number, y: number): boolean;

/**
 * Tests whether the specified point is inside the specified path
 * @param path - Path2D object to test
 * @param x - The x-axis coordinate of the point
 * @param y - The y-axis coordinate of the point
 * @returns True if point is inside the path
 */
isPointInPath(path: Path2D, x: number, y: number): boolean;

/**
 * Tests whether the specified point is inside the stroke of the current path
 * @param x - The x-axis coordinate of the point
 * @param y - The y-axis coordinate of the point
 * @returns True if point is in the stroke
 */
isPointInStroke(x: number, y: number): boolean;

/**
 * Tests whether the specified point is inside the stroke of the specified path
 * @param path - Path2D object to test
 * @param x - The x-axis coordinate of the point
 * @param y - The y-axis coordinate of the point
 * @returns True if point is in the stroke
 */
isPointInStroke(path: Path2D, x: number, y: number): boolean;

/**
 * Creates a clipping path from the current path
 * @param fillRule - Algorithm to determine inside vs outside of path
 */
clip(fillRule?: CanvasFillRule): void;

/**
 * Creates a clipping path from the specified path
 * @param path - Path2D object to use as clipping path
 * @param fillRule - Algorithm to determine inside vs outside of path
 */
clip(path: Path2D, fillRule?: CanvasFillRule): void;

/**
 * Creates a linear gradient along the line connecting two points
 * @param x0 - The x-axis coordinate of the start point
 * @param y0 - The y-axis coordinate of the start point
 * @param x1 - The x-axis coordinate of the end point
 * @param y1 - The y-axis coordinate of the end point
 * @returns CanvasGradient object
 */
createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;

/**
 * Creates a radial gradient between two circles
 * @param x0 - The x-axis coordinate of the start circle's center
 * @param y0 - The y-axis coordinate of the start circle's center
 * @param r0 - The radius of the start circle
 * @param x1 - The x-axis coordinate of the end circle's center
 * @param y1 - The y-axis coordinate of the end circle's center
 * @param r1 - The radius of the end circle
 * @returns CanvasGradient object
 */
createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;

/**
 * Creates a pattern using the specified image and repetition
 * @param image - The image source for the pattern
 * @param repetition - How to repeat the pattern
 * @returns CanvasPattern object or null
 */
createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null;

/**
 * Returns ImageData object representing pixel data for specified area
 * @param sx - The x-axis coordinate of the top-left corner of rectangle
 * @param sy - The y-axis coordinate of the top-left corner of rectangle
 * @param sw - The width of the rectangle
 * @param sh - The height of the rectangle
 * @returns ImageData object containing pixel data
 */
getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;

/**
 * Paints data from ImageData object onto the canvas
 * @param imagedata - ImageData object containing the pixel data
 * @param dx - Horizontal position at which to place the image data
 * @param dy - Vertical position at which to place the image data
 */
putImageData(imagedata: ImageData, dx: number, dy: number): void;

/**
 * Paints data from ImageData object onto the canvas with dirty rectangle
 * @param imagedata - ImageData object containing the pixel data
 * @param dx - Horizontal position at which to place the image data
 * @param dy - Vertical position at which to place the image data
 * @param dirtyX - Horizontal position of the top-left corner of dirty rectangle
 * @param dirtyY - Vertical position of the top-left corner of dirty rectangle
 * @param dirtyWidth - Width of the dirty rectangle
 * @param dirtyHeight - Height of the dirty rectangle
 */
putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void;

/**
 * Creates ImageData object with specified dimensions
 * @param width - The width of the new ImageData object
 * @param height - The height of the new ImageData object
 * @returns New ImageData object
 */
createImageData(width: number, height: number): ImageData;

/**
 * Creates ImageData object with same dimensions as specified ImageData
 * @param imagedata - ImageData object to copy dimensions from
 * @returns New ImageData object with same dimensions
 */
createImageData(imagedata: ImageData): ImageData;

/**
 * Adds a hit region to the canvas for accessibility and event handling
 * @param options - Configuration object for the hit region
 * @throws {DOMException} If both id and control are null
 * @throws {TypeError} If fillRule is not a valid CanvasFillRule
 */
addHitRegion(options?: {
  path?: Path2D;
  fillRule?: CanvasFillRule;
  id?: string;
  parentID?: string;
  cursor?: string;
  control?: Element;
  label?: string;
  role?: string;
}): void;

/**
 * Clears all hit regions from the canvas
 */
clearHitRegions(): void;

/**
 * Removes a specific hit region by its identifier
 * @param id - The identifier of the hit region to remove
 */
removeHitRegion(id: string): void;

/**
 * Draws a focus ring around the current path if the element has focus
 * @param element - The element to check for focus
 */
drawFocusIfNeeded(element: Element): void;

/**
 * Draws a focus ring around the specified path if the element has focus
 * @param path - Path2D object defining the focus area
 * @param element - The element to check for focus
 */
drawFocusIfNeeded(path: Path2D, element: Element): void;

/**
 * Scrolls the current path into view if necessary
 */
scrollPathIntoView(): void;

/**
 * Scrolls the specified path into view if necessary
 * @param path - Path2D object to scroll into view
 */
scrollPathIntoView(path: Path2D): void;