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

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/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.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | (number | [DOMPointInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/))\[\],  
    ): void;  
    [roundRect](#roundrect-2)(  
        x: number,  
        y: number,  
        w: number,  
        h: number,  
        radii?: number | [DOMPointInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number | [DOMPointInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/), any, any\>,  
    ): void;  
}

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.Path2D))

-   [CanvasPath](https://docs.maptiler.com/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.maptiler.com/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.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[arc](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[arcTo](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[bezierCurveTo](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[closePath](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[ellipse](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[lineTo](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[moveTo](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[quadraticCurveTo](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[rect](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/#rect)
    

### roundRect[](#roundrect)

-   roundRect(  
        x: number,  
        y: number,  
        w: number,  
        h: number,  
        radii?: number | [DOMPointInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | (number | [DOMPointInit](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | (number | [DOMPointInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/))\[\]
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[roundRect](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/#roundrect)
    
-   roundRect(  
        x: number,  
        y: number,  
        w: number,  
        h: number,  
        radii?: number | [DOMPointInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number | [DOMPointInit](https://docs.maptiler.com/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.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/) | [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number | [DOMPointInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMPointInit/), any, any\>
    
    #### Returns void
    
    Inherited from [CanvasPath](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/).[roundRect](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPath/#roundrect)