---
title: "Path2D | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs-beta-4y5.pages.dev/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface Path2D

The **`Path2D`** interface of the Canvas 2D API is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Path2D)

interface Path2D {  
    [addPath](#addpath-1)(path: Path2D, transform?: [DOMMatrix2DInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): void;  
    [arc](#arc-1)(  
        x: number,  
        y: number,  
        radius: number,  
        startAngle: number,  
        endAngle: number,  
        counterclockwise?: boolean,  
    ): void;  
    [arcTo](#arcto-1)(x1: number, y1: number, x2: number, y2: number, radius: number): void;  
    [bezierCurveTo](#beziercurveto-1)(  
        cp1x: number,  
        cp1y: number,  
        cp2x: number,  
        cp2y: number,  
        x: number,  
        y: number,  
    ): void;  
    [closePath](#closepath-1)(): void;  
    [ellipse](#ellipse-1)(  
        x: number,  
        y: number,  
        radiusX: number,  
        radiusY: number,  
        rotation: number,  
        startAngle: number,  
        endAngle: number,  
        counterclockwise?: boolean,  
    ): void;  
    [lineTo](#lineto-1)(x: number, y: number): void;  
    [moveTo](#moveto-1)(x: number, y: number): void;  
    [quadraticCurveTo](#quadraticcurveto-1)(cpx: number, cpy: number, x: number, y: number): void;  
    [rect](#rect-1)(x: number, y: number, w: number, h: number): void;  
    [roundRect](#roundrect-1)(  
        x: number,  
        y: number,  
        w: number,  
        h: number,  
        radii?: number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | (number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/))\[\],  
    ): void;  
    [roundRect](#roundrect-2)(  
        x: number,  
        y: number,  
        w: number,  
        h: number,  
        radii?: number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | [Iterable](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.Iterable/)<number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/), any, any\>,  
    ): void;  
}

#### Hierarchy ([View Summary](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/hierarchy/#Externals.Path2D))

-   [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/)
    -   Path2D

##### Index

### Methods[](#methods)

[addPath](#addpath) [arc](#arc) [arcTo](#arcto) [bezierCurveTo](#beziercurveto) [closePath](#closepath) [ellipse](#ellipse) [lineTo](#lineto) [moveTo](#moveto) [quadraticCurveTo](#quadraticcurveto) [rect](#rect) [roundRect](#roundrect)

## Methods[](#methods-1)

### addPath[](#addpath)

-   addPath(path: Path2D, transform?: [DOMMatrix2DInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): void[](#addpath-1)
    
    The **`Path2D.addPath()`** method of the Canvas 2D API adds one Path2D object to another Path2D object.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Path2D/addPath)
    
    #### Parameters
    
    -   path: Path2D
    -   `Optional`transform: [DOMMatrix2DInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)
    
    #### Returns void
    

### arc[](#arc)

-   arc(  
        x: number,  
        y: number,  
        radius: number,  
        startAngle: number,  
        endAngle: number,  
        counterclockwise?: boolean,  
    ): void[](#arc-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arc)
    
    #### Parameters
    
    -   x: number
    -   y: number
    -   radius: number
    -   startAngle: number
    -   endAngle: number
    -   `Optional`counterclockwise: boolean
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[arc](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#arc)
    

### arcTo[](#arcto)

-   arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void[](#arcto-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arcTo)
    
    #### Parameters
    
    -   x1: number
    -   y1: number
    -   x2: number
    -   y2: number
    -   radius: number
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[arcTo](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#arcto)
    

### bezierCurveTo[](#beziercurveto)

-   bezierCurveTo(  
        cp1x: number,  
        cp1y: number,  
        cp2x: number,  
        cp2y: number,  
        x: number,  
        y: number,  
    ): void[](#beziercurveto-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo)
    
    #### Parameters
    
    -   cp1x: number
    -   cp1y: number
    -   cp2x: number
    -   cp2y: number
    -   x: number
    -   y: number
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[bezierCurveTo](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#beziercurveto)
    

### closePath[](#closepath)

-   closePath(): void[](#closepath-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath)
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[closePath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#closepath)
    

### ellipse[](#ellipse)

-   ellipse(  
        x: number,  
        y: number,  
        radiusX: number,  
        radiusY: number,  
        rotation: number,  
        startAngle: number,  
        endAngle: number,  
        counterclockwise?: boolean,  
    ): void[](#ellipse-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/ellipse)
    
    #### Parameters
    
    -   x: number
    -   y: number
    -   radiusX: number
    -   radiusY: number
    -   rotation: number
    -   startAngle: number
    -   endAngle: number
    -   `Optional`counterclockwise: boolean
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[ellipse](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#ellipse)
    

### lineTo[](#lineto)

-   lineTo(x: number, y: number): void[](#lineto-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo)
    
    #### Parameters
    
    -   x: number
    -   y: number
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[lineTo](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#lineto)
    

### moveTo[](#moveto)

-   moveTo(x: number, y: number): void[](#moveto-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo)
    
    #### Parameters
    
    -   x: number
    -   y: number
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[moveTo](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#moveto)
    

### quadraticCurveTo[](#quadraticcurveto)

-   quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void[](#quadraticcurveto-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo)
    
    #### Parameters
    
    -   cpx: number
    -   cpy: number
    -   x: number
    -   y: number
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[quadraticCurveTo](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#quadraticcurveto)
    

### rect[](#rect)

-   rect(x: number, y: number, w: number, h: number): void[](#rect-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rect)
    
    #### Parameters
    
    -   x: number
    -   y: number
    -   w: number
    -   h: number
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[rect](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#rect)
    

### roundRect[](#roundrect)

-   roundRect(  
        x: number,  
        y: number,  
        w: number,  
        h: number,  
        radii?: number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | (number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/))\[\],  
    ): void[](#roundrect-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect)
    
    #### Parameters
    
    -   x: number
    -   y: number
    -   w: number
    -   h: number
    -   `Optional`radii: number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | (number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/))\[\]
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[roundRect](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#roundrect)
    
-   roundRect(  
        x: number,  
        y: number,  
        w: number,  
        h: number,  
        radii?: number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | [Iterable](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.Iterable/)<number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/), any, any\>,  
    ): void[](#roundrect-2)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect)
    
    #### Parameters
    
    -   x: number
    -   y: number
    -   w: number
    -   h: number
    -   `Optional`radii: number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | [Iterable](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.Iterable/)<number | [DOMPointInit](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.DOMPointInit/), any, any\>
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[roundRect](https://docs-beta-4y5.pages.dev/sdk-js/api-reference/interfaces/Externals.CanvasPath/#roundrect)