pixi.js/lib/scene/graphics/shared/Graphics.mjs.map

<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">

{"version":3,"file":"Graphics.mjs","sources":["../../../../src/scene/graphics/shared/Graphics.ts"],"sourcesContent":["import { deprecation, v8_0_0 } from '../../../utils/logging/deprecation';\nimport { ViewContainer, type ViewContainerOptions } from '../../view/ViewContainer';\nimport { GraphicsContext } from './GraphicsContext';\nimport { type GraphicsGpuData } from './GraphicsPipe';\n\nimport type { ColorSource } from '../../../color/Color';\nimport type { Matrix } from '../../../maths/matrix/Matrix';\nimport type { PointData } from '../../../maths/point/PointData';\nimport type { Instruction } from '../../../rendering/renderers/shared/instructions/Instruction';\nimport type { Texture } from '../../../rendering/renderers/shared/texture/Texture';\nimport type { Bounds } from '../../container/bounds/Bounds';\nimport type { ContextDestroyOptions, DestroyOptions } from '../../container/destroyTypes';\nimport type { FillInput, FillStyle, StrokeStyle } from './FillTypes';\nimport type { GraphicsPath } from './path/GraphicsPath';\nimport type { RoundedPoint } from './path/roundShape';\n\n/**\n * Constructor options used for Graphics instances.\n * Configures the initial state and behavior of a Graphics object.\n * @example\n * ```ts\n * const graphics = new Graphics({\n *     roundPixels: true,\n *     position: { x: 100.5, y: 100.5 }\n * });\n *\n * // Reuse graphics context\n * const sharedContext = new GraphicsContext();\n * const graphics1 = new Graphics({ context: sharedContext });\n * const graphics2 = new Graphics({ context: sharedContext });\n * ```\n * @see {@link Graphics} For the graphics class implementation\n * @see {@link GraphicsContext} For the graphics context API\n * @category scene\n * @standard\n */\nexport interface GraphicsOptions extends PixiMixins.GraphicsOptions, ViewContainerOptions\n{\n    /**\n     * The GraphicsContext to use, useful for reuse and optimisation\n     * If not provided, a new GraphicsContext will be created.\n     * @example\n     * ```ts\n     * const sharedContext = new GraphicsContext();\n     * const graphics1 = new Graphics({ context: sharedContext });\n     * const graphics2 = new Graphics({ context: sharedContext });\n     * ```\n     */\n    context?: GraphicsContext;\n    /**\n     * Whether or not to round the x/y position.\n     * @default false\n     * @example\n     * ```ts\n     * const graphics = new Graphics({ roundPixels: true });\n     * ```\n     */\n    roundPixels?: boolean;\n}\n// eslint-disable-next-line requireExport/require-export-jsdoc, requireMemberAPI/require-member-api-doc\nexport interface Graphics extends PixiMixins.Graphics, ViewContainer<GraphicsGpuData> {}\n\n/**\n * The Graphics class is primarily used to render primitive shapes such as lines, circles and\n * rectangles to the display, and to color and fill them. It can also be used to create complex\n * masks and hit areas for interaction.\n * @example\n * ```ts\n * // Create a new graphics object\n * const graphics = new Graphics();\n *\n * // Draw a filled rectangle with a stroke\n * graphics\n *     .rect(0, 0, 100, 100)\n *     .fill({ color: 0xff0000 }) // Fill with red\n *     .stroke({ width: 2, color: 0x000000 }); // Stroke with black\n *\n * // Draw a complex shape\n * graphics\n *     .moveTo(50, 50)\n *     .lineTo(100, 100)\n *     .arc(100, 100, 50, 0, Math.PI)\n *     .closePath()\n *     .fill({ color: 0x00ff00, alpha: 0.5 }); // Fill the shape\n *\n * // Use as a mask\n * sprite.mask = graphics;\n * ```\n * @see {@link GraphicsContext} For the underlying drawing API\n * @see {@link GraphicsPath} For path creation\n * @category scene\n * @standard\n */\nexport class Graphics extends ViewContainer<GraphicsGpuData> implements Instruction\n{\n    /** @internal */\n    public override readonly renderPipeId: string = 'graphics';\n    /** @internal */\n    public batched: boolean;\n\n    private _context: GraphicsContext;\n    private readonly _ownedContext: GraphicsContext;\n\n    /**\n     * Creates a new Graphics object.\n     * @param options - Options for the Graphics.\n     */\n    constructor(options?: GraphicsOptions | GraphicsContext)\n    {\n        if (options instanceof GraphicsContext)\n        {\n            options = { context: options };\n        }\n\n        const { context, roundPixels, ...rest } = options || {};\n\n        super({\n            label: 'Graphics',\n            ...rest\n        });\n\n        if (!context)\n        {\n            this._context = this._ownedContext = new GraphicsContext();\n        }\n        else\n        {\n            this._context = context;\n        }\n\n        this._context.on('update', this.onViewUpdate, this);\n\n        this.didViewUpdate = true;\n\n        this.allowChildren = false;\n        this.roundPixels = roundPixels ?? false;\n    }\n\n    set context(context: GraphicsContext)\n    {\n        if (context === this._context) return;\n\n        this._context.off('update', this.onViewUpdate, this);\n\n        this._context = context;\n\n        // TODO store this bound function somewhere else..\n        this._context.on('update', this.onViewUpdate, this);\n\n        this.onViewUpdate();\n    }\n\n    /**\n     * The underlying graphics context used for drawing operations.\n     * Controls how shapes and paths are rendered.\n     * @example\n     * ```ts\n     * // Create a shared context\n     * const sharedContext = new GraphicsContext();\n     *\n     * // Create graphics objects sharing the same context\n     * const graphics1 = new Graphics();\n     * const graphics2 = new Graphics();\n     *\n     * // Assign shared context\n     * graphics1.context = sharedContext;\n     * graphics2.context = sharedContext;\n     *\n     * // Both graphics will show the same shapes\n     * sharedContext\n     *     .rect(0, 0, 100, 100)\n     *     .fill({ color: 0xff0000 });\n     * ```\n     * @see {@link GraphicsContext} For drawing operations\n     * @see {@link GraphicsOptions} For context configuration\n     */\n    get context(): GraphicsContext\n    {\n        return this._context;\n    }\n\n    /**\n     * The local bounds of the graphics object.\n     * Returns the boundaries after all graphical operations but before any transforms.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a shape\n     * graphics\n     *     .rect(0, 0, 100, 100)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Get bounds information\n     * const bounds = graphics.bounds;\n     * console.log(bounds.width);  // 100\n     * console.log(bounds.height); // 100\n     * ```\n     * @readonly\n     * @see {@link Bounds} For bounds operations\n     * @see {@link Container#getBounds} For transformed bounds\n     */\n    override get bounds(): Bounds\n    {\n        return this._context.bounds;\n    }\n\n    /**\n     * Graphics objects do not need to update their bounds as the context handles this.\n     * @private\n     */\n    protected updateBounds(): void { /** */ }\n\n    /**\n     * Checks if the object contains the given point.\n     * Returns true if the point lies within the Graphics object's rendered area.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a shape\n     * graphics\n     *     .rect(0, 0, 100, 100)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Check point intersection\n     * if (graphics.containsPoint({ x: 50, y: 50 })) {\n     *     console.log('Point is inside rectangle!');\n     * }\n     * ```\n     * @param point - The point to check in local coordinates\n     * @returns True if the point is inside the Graphics object\n     * @see {@link Graphics#bounds} For bounding box checks\n     * @see {@link PointData} For point data structure\n     */\n    public override containsPoint(point: PointData)\n    {\n        return this._context.containsPoint(point);\n    }\n\n    /**\n     * Destroys this graphics renderable and optionally its context.\n     * @param options - Options parameter. A boolean will act as if all options\n     *\n     * If the context was created by this graphics and `destroy(false)` or `destroy()` is called\n     * then the context will still be destroyed.\n     *\n     * If you want to explicitly not destroy this context that this graphics created,\n     * then you should pass destroy({ context: false })\n     *\n     * If the context was passed in as an argument to the constructor then it will not be destroyed\n     * @example\n     * ```ts\n     * // Destroy the graphics and its context\n     * graphics.destroy();\n     * graphics.destroy(true);\n     * graphics.destroy({ context: true, texture: true, textureSource: true });\n     * ```\n     */\n    public override destroy(options?: DestroyOptions): void\n    {\n        if (this._ownedContext && !options)\n        {\n            this._ownedContext.destroy(options);\n        }\n        else if (options === true || (options as ContextDestroyOptions)?.context === true)\n        {\n            this._context.destroy(options);\n        }\n\n        (this._ownedContext as null) = null;\n        this._context = null;\n\n        super.destroy(options);\n    }\n\n    private _callContextMethod(method: keyof GraphicsContext, args: any[]): this\n    {\n        (this.context as any)[method](...args);\n\n        return this;\n    }\n\n    // --------------------------------------- GraphicsContext methods ---------------------------------------\n    /**\n     * Sets the current fill style of the graphics context.\n     * The fill style can be a color, gradient, pattern, or a complex style object.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Basic color fill\n     * graphics\n     *     .setFillStyle({ color: 0xff0000 }) // Red fill\n     *     .rect(0, 0, 100, 100)\n     *     .fill();\n     *\n     * // Gradient fill\n     * const gradient = new FillGradient({\n     *    end: { x: 1, y: 0 },\n     *    colorStops: [\n     *         { offset: 0, color: 0xff0000 }, // Red at start\n     *         { offset: 0.5, color: 0x00ff00 }, // Green at middle\n     *         { offset: 1, color: 0x0000ff }, // Blue at end\n     *    ],\n     * });\n     *\n     * graphics\n     *     .setFillStyle(gradient)\n     *     .circle(100, 100, 50)\n     *     .fill();\n     *\n     * // Pattern fill\n     * const pattern = new FillPattern(texture);\n     * graphics\n     *     .setFillStyle({\n     *         fill: pattern,\n     *         alpha: 0.5\n     *     })\n     *     .rect(0, 0, 200, 200)\n     *     .fill();\n     * ```\n     * @param {FillInput} args - The fill style to apply\n     * @returns The Graphics instance for chaining\n     * @see {@link FillStyle} For fill style options\n     * @see {@link FillGradient} For gradient fills\n     * @see {@link FillPattern} For pattern fills\n     */\n    public setFillStyle(...args: Parameters<GraphicsContext['setFillStyle']>): this\n    {\n        return this._callContextMethod('setFillStyle', args);\n    }\n\n    /**\n     * Sets the current stroke style of the graphics context.\n     * Similar to fill styles, stroke styles can encompass colors, gradients, patterns, or more detailed configurations.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Basic color stroke\n     * graphics\n     *     .setStrokeStyle({\n     *         width: 2,\n     *         color: 0x000000\n     *     })\n     *     .rect(0, 0, 100, 100)\n     *     .stroke();\n     *\n     * // Complex stroke style\n     * graphics\n     *     .setStrokeStyle({\n     *         width: 4,\n     *         color: 0xff0000,\n     *         alpha: 0.5,\n     *         join: 'round',\n     *         cap: 'round',\n     *         alignment: 0.5\n     *     })\n     *     .circle(100, 100, 50)\n     *     .stroke();\n     *\n     * // Gradient stroke\n     * const gradient = new FillGradient({\n     *    end: { x: 1, y: 0 },\n     *    colorStops: [\n     *         { offset: 0, color: 0xff0000 }, // Red at start\n     *         { offset: 0.5, color: 0x00ff00 }, // Green at middle\n     *         { offset: 1, color: 0x0000ff }, // Blue at end\n     *    ],\n     * });\n     *\n     * graphics\n     *     .setStrokeStyle({\n     *         width: 10,\n     *         fill: gradient\n     *     })\n     *     .poly([0,0, 100,50, 0,100])\n     *     .stroke();\n     * ```\n     * @param {StrokeInput} args - The stroke style to apply\n     * @returns The Graphics instance for chaining\n     * @see {@link StrokeStyle} For stroke style options\n     * @see {@link FillGradient} For gradient strokes\n     * @see {@link FillPattern} For pattern strokes\n     */\n    public setStrokeStyle(...args: Parameters<GraphicsContext['setStrokeStyle']>): this\n    {\n        return this._callContextMethod('setStrokeStyle', args);\n    }\n\n    /**\n     * Fills the current or given path with the current fill style or specified style.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Fill with direct color\n     * graphics\n     *     .circle(50, 50, 25)\n     *     .fill('red'); // Red fill\n     *\n     * // Fill with texture\n     * graphics\n     *    .rect(0, 0, 100, 100)\n     *    .fill(myTexture); // Fill with texture\n     *\n     * // Fill with complex style\n     * graphics\n     *     .rect(0, 0, 100, 100)\n     *     .fill({\n     *         color: 0x00ff00,\n     *         alpha: 0.5,\n     *         texture: myTexture,\n     *         matrix: new Matrix()\n     *     });\n     *\n     * // Fill with gradient\n     * const gradient = new FillGradient({\n     *     end: { x: 1, y: 0 },\n     *     colorStops: [\n     *         { offset: 0, color: 0xff0000 },\n     *         { offset: 0.5, color: 0x00ff00 },\n     *         { offset: 1, color: 0x0000ff },\n     *     ],\n     * });\n     *\n     * graphics\n     *     .circle(100, 100, 50)\n     *     .fill(gradient);\n     * ```\n     * @param {FillInput} style - The style to fill the path with. Can be:\n     * - A ColorSource\n     * - A gradient\n     * - A pattern\n     * - A complex style object\n     * If omitted, uses current fill style.\n     * @returns The Graphics instance for chaining\n     * @see {@link FillStyle} For fill style options\n     * @see {@link FillGradient} For gradient fills\n     * @see {@link FillPattern} For pattern fills\n     */\n    public fill(style?: FillInput): this;\n    /** @deprecated 8.0.0 */\n    public fill(color: ColorSource, alpha?: number): this;\n    public fill(...args: [FillStyle | ColorSource, number?]): this\n    {\n        return this._callContextMethod('fill', args);\n    }\n    /**\n     * Strokes the current path with the current stroke style or specified style.\n     * Outlines the shape using the stroke settings.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Stroke with direct color\n     * graphics\n     *     .circle(50, 50, 25)\n     *     .stroke({\n     *         width: 2,\n     *         color: 0xff0000\n     *     }); // 2px red stroke\n     *\n     * // Fill with texture\n     * graphics\n     *    .rect(0, 0, 100, 100)\n     *    .stroke(myTexture); // Fill with texture\n     *\n     * // Stroke with gradient\n     * const gradient = new FillGradient({\n     *     end: { x: 1, y: 0 },\n     *     colorStops: [\n     *         { offset: 0, color: 0xff0000 },\n     *         { offset: 0.5, color: 0x00ff00 },\n     *         { offset: 1, color: 0x0000ff },\n     *     ],\n     * });\n     *\n     * graphics\n     *     .rect(0, 0, 100, 100)\n     *     .stroke({\n     *         width: 4,\n     *         fill: gradient,\n     *         alignment: 0.5,\n     *         join: 'round'\n     *     });\n     * ```\n     * @param {StrokeStyle} args - Optional stroke style to apply. Can be:\n     * - A stroke style object with width, color, etc.\n     * - A gradient\n     * - A pattern\n     * If omitted, uses current stroke style.\n     * @returns The Graphics instance for chaining\n     * @see {@link StrokeStyle} For stroke style options\n     * @see {@link FillGradient} For gradient strokes\n     * @see {@link setStrokeStyle} For setting default stroke style\n     */\n    public stroke(...args: Parameters<GraphicsContext['stroke']>): this\n    {\n        return this._callContextMethod('stroke', args);\n    }\n    /**\n     * Adds a texture to the graphics context. This method supports multiple ways to draw textures\n     * including basic textures, tinted textures, and textures with custom dimensions.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Basic texture drawing\n     * graphics.texture(myTexture);\n     *\n     * // Tinted texture with position\n     * graphics.texture(myTexture, 0xff0000); // Red tint\n     *\n     * // Texture with custom position and dimensions\n     * graphics\n     *     .texture(\n     *         myTexture,    // texture\n     *         0xffffff,     // white tint\n     *         100, 100,     // position\n     *         200, 150      // dimensions\n     *     );\n     * ```\n     * Basic texture drawing:\n     * @param texture - The Texture object to use.\n     * @returns The instance of the current Graphics for chaining.\n     *\n     * Extended texture drawing:\n     * @param texture - The Texture object to use.\n     *        tint - A ColorSource to tint the texture (defaults to white).\n     *        dx - The x-coordinate for the texture placement.\n     *        dy - The y-coordinate for the texture placement.\n     *        dw - The width to draw the texture (defaults to texture width).\n     *        dh - The height to draw the texture (defaults to texture height).\n     * @returns The instance of the current Graphics for chaining.\n     * @see {@link Texture} For texture creation\n     * @see {@link FillPattern} For pattern fills\n     */\n    public texture(texture: Texture): this;\n    public texture(texture: Texture, tint?: ColorSource, dx?: number, dy?: number, dw?: number, dh?: number): this;\n    public texture(...args: [Texture, number?, number?, number?, number?, number?]): this\n    {\n        return this._callContextMethod('texture', args);\n    }\n    /**\n     * Resets the current path. Any previous path and its commands are discarded and a new path is\n     * started. This is typically called before beginning a new shape or series of drawing commands.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     * graphics\n     *     .circle(150, 150, 50)\n     *     .fill({ color: 0x00ff00 })\n     *     .beginPath() // Starts a new path\n     *     .circle(250, 150, 50)\n     *     .fill({ color: 0x0000ff });\n     * ```\n     * @returns The Graphics instance for chaining\n     * @see {@link Graphics#moveTo} For starting a new subpath\n     * @see {@link Graphics#closePath} For closing the current path\n     */\n    public beginPath(): this\n    {\n        return this._callContextMethod('beginPath', []);\n    }\n    /**\n     * Applies a cutout to the last drawn shape. This is used to create holes or complex shapes by\n     * subtracting a path from the previously drawn path.\n     *\n     * If a hole is not completely in a shape, it will fail to cut correctly.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw outer circle\n     * graphics\n     *     .circle(100, 100, 50)\n     *     .fill({ color: 0xff0000 });\n     *     .circle(100, 100, 25) // Inner circle\n     *     .cut() // Cuts out the inner circle from the outer circle\n     * ```\n     */\n    public cut(): this\n    {\n        return this._callContextMethod('cut', []);\n    }\n    /**\n     * Adds an arc to the current path, which is centered at (x, y) with the specified radius,\n     * starting and ending angles, and direction.\n     * @example\n     * ```ts\n     * // Draw a simple arc (quarter circle)\n     * const graphics = new Graphics();\n     * graphics\n     *     .arc(100, 100, 50, 0, Math.PI/2)\n     *     .stroke({ width: 2, color: 0xff0000 });\n     *\n     * // Draw a full circle using an arc\n     * graphics\n     *     .arc(200, 200, 30, 0, Math.PI * 2)\n     *     .stroke({ color: 0x00ff00 });\n     *\n     * // Draw a counterclockwise arc\n     * graphics\n     *     .arc(150, 150, 40, Math.PI, 0, true)\n     *     .stroke({ width: 2, color: 0x0000ff });\n     * ```\n     * @param x - The x-coordinate of the arc's center\n     * @param y - The y-coordinate of the arc's center\n     * @param radius - The arc's radius (must be positive)\n     * @param startAngle - The starting point of the arc, in radians\n     * @param endAngle - The end point of the arc, in radians\n     * @param counterclockwise - Optional. If true, draws the arc counterclockwise.\n     *                          If false (default), draws clockwise.\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#circle} For drawing complete circles\n     * @see {@link Graphics#arcTo} For drawing arcs between points\n     * @see {@link Graphics#arcToSvg} For SVG-style arc drawing\n     */\n    public arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;\n    public arc(...args: Parameters<GraphicsContext['arc']>): this\n    {\n        return this._callContextMethod('arc', args);\n    }\n    /**\n     * Adds an arc to the current path that connects two points using a radius.\n     * The arc is drawn between the current point and the specified end point,\n     * using the given control point to determine the curve of the arc.\n     * @example\n     * ```ts\n     * // Draw a simple curved corner\n     * const graphics = new Graphics();\n     * graphics\n     *     .moveTo(50, 50)\n     *     .arcTo(100, 50, 100, 100, 20) // Rounded corner with 20px radius\n     *     .stroke({ width: 2, color: 0xff0000 });\n     *\n     * // Create a rounded rectangle using arcTo\n     * graphics\n     *     .moveTo(150, 150)\n     *     .arcTo(250, 150, 250, 250, 30) // Top right corner\n     *     .arcTo(250, 250, 150, 250, 30) // Bottom right corner\n     *     .arcTo(150, 250, 150, 150, 30) // Bottom left corner\n     *     .arcTo(150, 150, 250, 150, 30) // Top left corner\n     *     .fill({ color: 0x00ff00 });\n     * ```\n     * @param x1 - The x-coordinate of the control point\n     * @param y1 - The y-coordinate of the control point\n     * @param x2 - The x-coordinate of the end point\n     * @param y2 - The y-coordinate of the end point\n     * @param radius - The radius of the arc in pixels (must be positive)\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#arc} For drawing arcs using center point and angles\n     * @see {@link Graphics#arcToSvg} For SVG-style arc drawing\n     * @see {@link Graphics#roundRect} For drawing rectangles with rounded corners\n     */\n    public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;\n    public arcTo(...args: Parameters<GraphicsContext['arcTo']>): this\n    {\n        return this._callContextMethod('arcTo', args);\n    }\n    /**\n     * Adds an SVG-style arc to the path, allowing for elliptical arcs based on the SVG spec.\n     * This is particularly useful when converting SVG paths to Graphics or creating complex curved shapes.\n     * @example\n     * ```ts\n     * // Draw a simple elliptical arc\n     * const graphics = new Graphics();\n     * graphics\n     *     .moveTo(100, 100)\n     *     .arcToSvg(50, 30, 0, 0, 1, 200, 100)\n     *     .stroke({ width: 2, color: 0xff0000 });\n     *\n     * // Create a complex path with rotated elliptical arc\n     * graphics\n     *     .moveTo(150, 150)\n     *     .arcToSvg(\n     *         60,    // rx\n     *         30,    // ry\n     *         45,    // x-axis rotation (45 degrees)\n     *         1,     // large arc flag\n     *         0,     // sweep flag\n     *         250,   // end x\n     *         200    // end y\n     *     )\n     *     .stroke({ width: 4, color: 0x00ff00 });\n     *\n     * // Chain multiple arcs for complex shapes\n     * graphics\n     *     .moveTo(300, 100)\n     *     .arcToSvg(40, 20, 0, 0, 1, 350, 150)\n     *     .arcToSvg(40, 20, 0, 0, 1, 300, 200)\n     *     .fill({ color: 0x0000ff, alpha: 0.5 });\n     * ```\n     * @param rx - The x-radius of the ellipse (must be non-negative)\n     * @param ry - The y-radius of the ellipse (must be non-negative)\n     * @param xAxisRotation - The rotation of the ellipse's x-axis relative to the x-axis, in degrees\n     * @param largeArcFlag - Either 0 or 1, determines if the larger of the two possible arcs is chosen (1) or not (0)\n     * @param sweepFlag - Either 0 or 1, determines if the arc should be swept in\n     *                    a positive angle direction (1) or negative (0)\n     * @param x - The x-coordinate of the arc's end point\n     * @param y - The y-coordinate of the arc's end point\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#arc} For simple circular arcs\n     * @see {@link Graphics#arcTo} For connecting points with circular arcs\n     * @see {@link Graphics#svg} For parsing complete SVG paths\n     */\n    public arcToSvg(\n        rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, x: number, y: number\n    ): this;\n    public arcToSvg(...args: Parameters<GraphicsContext['arcToSvg']>): this\n    {\n        return this._callContextMethod('arcToSvg', args);\n    }\n    /**\n     * Adds a cubic Bézier curve to the path, from the current point to the specified end point.\n     * The curve is influenced by two control points that define its shape and curvature.\n     * @example\n     * ```ts\n     * // Draw a simple curved line\n     * const graphics = new Graphics();\n     * graphics\n     *     .moveTo(50, 50)\n     *     .bezierCurveTo(\n     *         100, 25,   // First control point\n     *         150, 75,   // Second control point\n     *         200, 50    // End point\n     *     )\n     *     .stroke({ width: 2, color: 0xff0000 });\n     *\n     * // Adjust curve smoothness\n     * graphics\n     *     .moveTo(50, 200)\n     *     .bezierCurveTo(\n     *         100, 150,\n     *         200, 250,\n     *         250, 200,\n     *         0.5         // Smoothness factor\n     *     )\n     *     .stroke({ width: 4, color: 0x0000ff });\n     * ```\n     * @param cp1x - The x-coordinate of the first control point\n     * @param cp1y - The y-coordinate of the first control point\n     * @param cp2x - The x-coordinate of the second control point\n     * @param cp2y - The y-coordinate of the second control point\n     * @param x - The x-coordinate of the end point\n     * @param y - The y-coordinate of the end point\n     * @param smoothness - Optional parameter to adjust the curve's smoothness (0-1)\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#quadraticCurveTo} For simpler curves with one control point\n     * @see {@link Graphics#arc} For circular arcs\n     * @see {@link Graphics#arcTo} For connecting points with circular arcs\n     */\n    public bezierCurveTo(\n        cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number, smoothness?: number\n    ): this;\n    public bezierCurveTo(...args: Parameters<GraphicsContext['bezierCurveTo']>): this\n    {\n        return this._callContextMethod('bezierCurveTo', args);\n    }\n    /**\n     * Closes the current path by drawing a straight line back to the start point.\n     *\n     * This is useful for completing shapes and ensuring they are properly closed for fills.\n     * @example\n     * ```ts\n     * // Create a triangle with closed path\n     * const graphics = new Graphics();\n     * graphics\n     *     .moveTo(50, 50)\n     *     .lineTo(100, 100)\n     *     .lineTo(0, 100)\n     *     .closePath()\n     * ```\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#beginPath} For starting a new path\n     * @see {@link Graphics#fill} For filling closed paths\n     * @see {@link Graphics#stroke} For stroking paths\n     */\n    public closePath(): this\n    {\n        return this._callContextMethod('closePath', []);\n    }\n    /**\n     * Draws an ellipse at the specified location and with the given x and y radii.\n     * An optional transformation can be applied, allowing for rotation, scaling, and translation.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a basic ellipse\n     * graphics\n     *     .ellipse(100, 100, 50, 30)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Draw an ellipse with stroke\n     * graphics\n     *     .ellipse(200, 100, 70, 40)\n     *     .stroke({ width: 2, color: 0x00ff00 });\n     * ```\n     * @param x - The x-coordinate of the center of the ellipse\n     * @param y - The y-coordinate of the center of the ellipse\n     * @param radiusX - The horizontal radius of the ellipse\n     * @param radiusY - The vertical radius of the ellipse\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#circle} For drawing perfect circles\n     * @see {@link Graphics#arc} For drawing partial circular arcs\n     */\n    public ellipse(x: number, y: number, radiusX: number, radiusY: number): this;\n    public ellipse(...args: Parameters<GraphicsContext['ellipse']>): this\n    {\n        return this._callContextMethod('ellipse', args);\n    }\n    /**\n     * Draws a circle shape at the specified location with the given radius.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a simple filled circle\n     * graphics\n     *     .circle(100, 100, 50)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Draw a circle with gradient fill\n     * const gradient = new FillGradient({\n     *     end: { x: 1, y: 0 },\n     *     colorStops: [\n     *           { offset: 0, color: 0xff0000 }, // Red at start\n     *           { offset: 0.5, color: 0x00ff00 }, // Green at middle\n     *           { offset: 1, color: 0x0000ff }, // Blue at end\n     *     ],\n     * });\n     *\n     * graphics\n     *     .circle(250, 100, 40)\n     *     .fill({ fill: gradient });\n     * ```\n     * @param x - The x-coordinate of the center of the circle\n     * @param y - The y-coordinate of the center of the circle\n     * @param radius - The radius of the circle\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#ellipse} For drawing ellipses\n     * @see {@link Graphics#arc} For drawing partial circles\n     */\n    public circle(x: number, y: number, radius: number): this;\n    public circle(...args: Parameters<GraphicsContext['circle']>): this\n    {\n        return this._callContextMethod('circle', args);\n    }\n    /**\n     * Adds another `GraphicsPath` to this path, optionally applying a transformation.\n     * This allows for reuse of complex paths and shapes across different graphics instances.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     * // Create a reusable path\n     * const heartPath = new GraphicsPath()\n     *     .moveTo(0, 0)\n     *     .bezierCurveTo(-50, -25, -50, -75, 0, -100)\n     *     .bezierCurveTo(50, -75, 50, -25, 0, 0);\n     *\n     * // Use the path multiple times\n     * graphics\n     *     .path(heartPath)\n     *     .fill({ color: 0xff0000 })\n     *     .translateTransform(200, 200)\n     *     .path(heartPath)\n     *     .fill({ color: 0xff0000, alpha: 0.5 });\n     * ```\n     * @param path - The `GraphicsPath` to add to the current path\n     * @returns The Graphics instance for method chaining\n     * @see {@link GraphicsPath} For creating reusable paths\n     * @see {@link Matrix} For creating transformations\n     * @see {@link Graphics#transform} For applying transformations\n     */\n    public path(path: GraphicsPath): this;\n    public path(...args: Parameters<GraphicsContext['path']>): this\n    {\n        return this._callContextMethod('path', args);\n    }\n    /**\n     * Connects the current point to a new point with a straight line.\n     * Any subsequent drawing commands will start from this new point.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a triangle\n     * graphics\n     *     .moveTo(50, 50)\n     *     .lineTo(100, 100)\n     *     .lineTo(0, 100)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Create a complex shape with multiple lines\n     * graphics\n     *     .moveTo(200, 50)\n     *     .lineTo(250, 50)\n     *     .lineTo(250, 100)\n     *     .lineTo(200, 100)\n     *     .stroke({ width: 2, color: 0x00ff00 });\n     * ```\n     * @param x - The x-coordinate of the line's end point\n     * @param y - The y-coordinate of the line's end point\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#moveTo} For starting a new sub-path\n     */\n    public lineTo(x: number, y: number): this;\n    public lineTo(...args: Parameters<GraphicsContext['lineTo']>): this\n    {\n        return this._callContextMethod('lineTo', args);\n    }\n    /**\n     * Sets the starting point for a new sub-path.\n     *\n     * Moves the \"pen\" to a new location without drawing a line.\n     * Any subsequent drawing commands will start from this point.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Create multiple separate lines\n     * graphics\n     *     .moveTo(50, 50)\n     *     .lineTo(100, 50)\n     *     .moveTo(50, 100)    // Start a new line\n     *     .lineTo(100, 100)\n     *     .stroke({ width: 2, color: 0xff0000 });\n     *\n     * // Create disconnected shapes\n     * graphics\n     *     .moveTo(150, 50)\n     *     .rect(150, 50, 50, 50)\n     *     .fill({ color: 0x00ff00 })\n     *     .moveTo(250, 50)    // Start a new shape\n     *     .circle(250, 75, 25)\n     *     .fill({ color: 0x0000ff });\n     *\n     * // Position before curved paths\n     * graphics\n     *     .moveTo(300, 50)\n     *     .bezierCurveTo(\n     *         350, 25,   // Control point 1\n     *         400, 75,   // Control point 2\n     *         450, 50    // End point\n     *     )\n     *     .stroke({ width: 3, color: 0xff00ff });\n     * ```\n     * @param x - The x-coordinate to move to\n     * @param y - The y-coordinate to move to\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#lineTo} For drawing lines\n     * @see {@link Graphics#beginPath} For starting a completely new path\n     */\n    public moveTo(x: number, y: number): this;\n    public moveTo(...args: Parameters<GraphicsContext['moveTo']>): this\n    {\n        return this._callContextMethod('moveTo', args);\n    }\n    /**\n     * Adds a quadratic curve to the path. It requires two points: the control point and the end point.\n     * The starting point is the last point in the current path.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a simple curve\n     * graphics\n     *     .moveTo(50, 50)\n     *     .quadraticCurveTo(100, 25, 150, 50)\n     *     .stroke({ width: 2, color: 0xff0000 });\n     *\n     * // Adjust curve smoothness\n     * graphics\n     *     .moveTo(50, 200)\n     *     .quadraticCurveTo(\n     *         150, 150,   // Control point\n     *         250, 200,   // End point\n     *         0.5         // Smoothness factor\n     *     )\n     *     .stroke({\n     *         width: 4,\n     *         color: 0x0000ff,\n     *         alpha: 0.7\n     *     });\n     * ```\n     * @param cpx - The x-coordinate of the control point\n     * @param cpy - The y-coordinate of the control point\n     * @param x - The x-coordinate of the end point\n     * @param y - The y-coordinate of the end point\n     * @param smoothness - Optional parameter to adjust the curve's smoothness (0-1)\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#bezierCurveTo} For curves with two control points\n     * @see {@link Graphics#arc} For circular arcs\n     * @see {@link Graphics#arcTo} For connecting points with circular arcs\n     */\n    public quadraticCurveTo(cpx: number, cpy: number, x: number, y: number, smoothness?: number): this;\n    public quadraticCurveTo(...args: Parameters<GraphicsContext['quadraticCurveTo']>): this\n    {\n        return this._callContextMethod('quadraticCurveTo', args);\n    }\n    /**\n     * Draws a rectangle shape.\n     *\n     * This method adds a new rectangle path to the current drawing.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a simple filled rectangle\n     * graphics\n     *     .rect(50, 50, 100, 75)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Rectangle with stroke\n     * graphics\n     *     .rect(200, 50, 100, 75)\n     *     .stroke({ width: 2, color: 0x00ff00 });\n     * ```\n     * @param x - The x-coordinate of the top-left corner of the rectangle\n     * @param y - The y-coordinate of the top-left corner of the rectangle\n     * @param w - The width of the rectangle\n     * @param h - The height of the rectangle\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#roundRect} For drawing rectangles with rounded corners\n     * @see {@link Graphics#filletRect} For drawing rectangles with filleted corners\n     * @see {@link Graphics#chamferRect} For drawing rectangles with chamfered corners\n     */\n\n    public rect(x: number, y: number, w: number, h: number): this;\n    public rect(...args: Parameters<GraphicsContext['rect']>): this\n    {\n        return this._callContextMethod('rect', args);\n    }\n    /**\n     * Draws a rectangle with rounded corners. The corner radius can be specified to\n     * determine how rounded the corners should be.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Basic rounded rectangle\n     * graphics\n     *     .roundRect(50, 50, 100, 75, 15)\n     *     .fill({ color: 0xff0000 });\n     * ```\n     * @param x - The x-coordinate of the top-left corner of the rectangle\n     * @param y - The y-coordinate of the top-left corner of the rectangle\n     * @param w - The width of the rectangle\n     * @param h - The height of the rectangle\n     * @param radius - The radius of the rectangle's corners (must be non-negative)\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#rect} For drawing rectangles with sharp corners\n     * @see {@link Graphics#filletRect} For drawing rectangles with filleted corners\n     * @see {@link Graphics#chamferRect} For drawing rectangles with chamfered corners\n     */\n    public roundRect(x: number, y: number, w: number, h: number, radius?: number): this;\n    public roundRect(...args: Parameters<GraphicsContext['roundRect']>): this\n    {\n        return this._callContextMethod('roundRect', args);\n    }\n    /**\n     * Draws a polygon shape by specifying a sequence of points. This method allows for the creation of complex polygons,\n     * which can be both open and closed.\n     *\n     * An optional transformation can be applied, enabling the polygon to be scaled,\n     * rotated, or translated as needed.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a triangle using array of numbers [x1,y1, x2,y2, x3,y3]\n     * graphics\n     *     .poly([50,50, 100,100, 0,100], true)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Draw a polygon using point objects\n     * graphics\n     *     .poly([\n     *         { x: 200, y: 50 },\n     *         { x: 250, y: 100 },\n     *         { x: 200, y: 150 },\n     *         { x: 150, y: 100 }\n     *     ])\n     *     .fill({ color: 0x00ff00 });\n     *\n     * // Draw an open polygon with stroke\n     * graphics\n     *     .poly([300,50, 350,50, 350,100, 300,100], false)\n     *     .stroke({\n     *         width: 2,\n     *         color: 0x0000ff,\n     *         join: 'round'\n     *     });\n     * ```\n     * @param points - An array of numbers [x1,y1, x2,y2, ...] or an array of point objects [{x,y}, ...]\n     *                representing the vertices of the polygon in sequence\n     * @param close - Whether to close the polygon path by connecting the last point to the first.\n     *               Default is true.\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#regularPoly} For drawing regular polygons\n     * @see {@link Graphics#roundPoly} For drawing polygons with rounded corners\n     * @see {@link Graphics#star} For drawing star shapes\n     */\n    public poly(points: number[] | PointData[], close?: boolean): this;\n    public poly(...args: Parameters<GraphicsContext['poly']>): this\n    {\n        return this._callContextMethod('poly', args);\n    }\n    /**\n     * Draws a regular polygon with a specified number of sides. All sides and angles are equal,\n     * making shapes like triangles, squares, pentagons, etc.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a simple triangle (3 sides)\n     * graphics\n     *     .regularPoly(100, 100, 50, 3)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Draw a hexagon (6 sides) with rotation\n     * graphics\n     *     .regularPoly(\n     *         250, 100,    // center position\n     *         40,          // radius\n     *         6,           // sides\n     *         Math.PI / 6  // rotation (30 degrees)\n     *     )\n     *     .fill({ color: 0x00ff00 })\n     *     .stroke({ width: 2, color: 0x000000 });\n     *\n     * // Draw an octagon (8 sides) with transform\n     * const transform = new Matrix()\n     *     .scale(1.5, 1)      // stretch horizontally\n     *     .rotate(Math.PI/4); // rotate 45 degrees\n     *\n     * graphics\n     *     .regularPoly(400, 100, 30, 8, 0, transform)\n     *     .fill({ color: 0x0000ff, alpha: 0.5 });\n     * ```\n     * @param x - The x-coordinate of the center of the polygon\n     * @param y - The y-coordinate of the center of the polygon\n     * @param radius - The radius of the circumscribed circle of the polygon\n     * @param sides - The number of sides of the polygon (must be 3 or more)\n     * @param rotation - The rotation angle of the polygon in radians (default: 0)\n     * @param transform - Optional Matrix to transform the polygon's shape\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#poly} For drawing custom polygons\n     * @see {@link Graphics#roundPoly} For drawing polygons with rounded corners\n     * @see {@link Graphics#star} For drawing star shapes\n     */\n    public regularPoly(x: number, y: number, radius: number, sides: number, rotation?: number, transform?: Matrix): this;\n    public regularPoly(...args: Parameters<GraphicsContext['regularPoly']>): this\n    {\n        return this._callContextMethod('regularPoly', args);\n    }\n    /**\n     * Draws a polygon with rounded corners.\n     *\n     * Similar to `regularPoly` but with the ability to round the corners of the polygon.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a basic rounded triangle\n     * graphics\n     *     .roundPoly(100, 100, 50, 3, 10)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Draw a rounded hexagon with rotation\n     * graphics\n     *     .roundPoly(\n     *         250, 150,     // center position\n     *         40,           // radius\n     *         6,            // sides\n     *         8,            // corner radius\n     *         Math.PI / 6   // rotation (30 degrees)\n     *     )\n     *     .fill({ color: 0x00ff00 })\n     *     .stroke({ width: 2, color: 0x000000 });\n     * ```\n     * @param x - The x-coordinate of the center of the polygon\n     * @param y - The y-coordinate of the center of the polygon\n     * @param radius - The radius of the circumscribed circle of the polygon\n     * @param sides - The number of sides of the polygon (must be 3 or more)\n     * @param corner - The radius of the corner rounding (must be non-negative)\n     * @param rotation - The rotation angle of the polygon in radians (default: 0)\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#regularPoly} For drawing polygons without rounded corners\n     * @see {@link Graphics#poly} For drawing custom polygons\n     * @see {@link Graphics#roundRect} For drawing rectangles with rounded corners\n     */\n    public roundPoly(x: number, y: number, radius: number, sides: number, corner: number, rotation?: number): this;\n    public roundPoly(...args: Parameters<GraphicsContext['roundPoly']>): this\n    {\n        return this._callContextMethod('roundPoly', args);\n    }\n    /**\n     * Draws a shape with rounded corners. This function supports custom radius for each corner of the shape.\n     * Optionally, corners can be rounded using a quadratic curve instead of an arc, providing a different aesthetic.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a custom shape with rounded corners\n     * graphics\n     *     .roundShape([\n     *         { x: 100, y: 100, radius: 20 },\n     *         { x: 200, y: 100, radius: 10 },\n     *         { x: 200, y: 200, radius: 15 },\n     *         { x: 100, y: 200, radius: 5 }\n     *     ], 10)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Using quadratic curves for corners\n     * graphics\n     *     .roundShape([\n     *         { x: 250, y: 100 },\n     *         { x: 350, y: 100 },\n     *         { x: 350, y: 200 },\n     *         { x: 250, y: 200 }\n     *     ], 15, true, 0.5)\n     *     .fill({ color: 0x00ff00 })\n     *     .stroke({ width: 2, color: 0x000000 });\n     *\n     * // Shape with varying corner radii\n     * graphics\n     *     .roundShape([\n     *         { x: 400, y: 100, radius: 30 },\n     *         { x: 500, y: 100, radius: 5 },\n     *         { x: 450, y: 200, radius: 15 }\n     *     ], 10)\n     *     .fill({ color: 0x0000ff, alpha: 0.5 });\n     * ```\n     * @param points - An array of `RoundedPoint` representing the corners of the shape.\n     *                Each point can have its own radius or use the default.\n     *                A minimum of 3 points is required.\n     * @param radius - The default radius for corners without a specific radius defined.\n     *                Applied to any point that doesn't specify its own radius.\n     * @param useQuadratic - When true, corners are drawn using quadratic curves instead\n     *                      of arcs, creating a different visual style. Defaults to false.\n     * @param smoothness - Controls the smoothness of quadratic corners when useQuadratic\n     *                    is true. Values range from 0-1, higher values create smoother curves.\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#roundRect} For drawing rectangles with rounded corners\n     * @see {@link Graphics#roundPoly} For drawing regular polygons with rounded corners\n     */\n    public roundShape(points: RoundedPoint[], radius: number, useQuadratic?: boolean, smoothness?: number): this;\n    public roundShape(...args: Parameters<GraphicsContext['roundShape']>): this\n    {\n        return this._callContextMethod('roundShape', args);\n    }\n    /**\n     * Draws a rectangle with fillet corners. Unlike rounded rectangles, this supports negative corner\n     * radii which create external rounded corners rather than internal ones.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a rectangle with internal fillets\n     * graphics\n     *     .filletRect(50, 50, 100, 80, 15)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Draw a rectangle with external fillets\n     * graphics\n     *     .filletRect(200, 50, 100, 80, -20)\n     *     .fill({ color: 0x00ff00 })\n     *     .stroke({ width: 2, color: 0x000000 });\n     * ```\n     * @param x - The x-coordinate of the top-left corner of the rectangle\n     * @param y - The y-coordinate of the top-left corner of the rectangle\n     * @param width - The width of the rectangle\n     * @param height - The height of the rectangle\n     * @param fillet - The radius of the corner fillets (can be positive or negative)\n     * @returns The Graphics instance for method chaining\n     * @see {@link Graphics#roundRect} For standard rounded corners\n     * @see {@link Graphics#chamferRect} For angled corners\n     */\n    public filletRect(x: number, y: number, width: number, height: number, fillet: number): this;\n    public filletRect(...args: Parameters<GraphicsContext['filletRect']>): this\n    {\n        return this._callContextMethod('filletRect', args);\n    }\n    /**\n     * Draws a rectangle with chamfered (angled) corners. Each corner is cut off at\n     * a 45-degree angle based on the chamfer size.\n     * @example\n     * ```ts\n     * const graphics = new Graphics();\n     *\n     * // Draw a basic chamfered rectangle\n     * graphics\n     *     .chamferRect(50, 50, 100, 80, 15)\n     *     .fill({ color: 0xff0000 });\n     *\n     * // Add transform and stroke\n     * const transform = new Matrix()\n     *     .rotate(Math.PI / 4); // 45 degrees\n     *\n     * graphics\n     *     .chamferRect(200, 50, 100, 80, 20, transform)\n     *     .fill({ color: 0x00ff00 })\n     *     .stroke({ width: 2, color: 0x000000 });\n     * ```\n     * @param x -