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

# Interface CanvasPath

interface CanvasPath {  
    [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.CanvasPath))

-   CanvasPath
    -   [CanvasRenderingContext2D](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasRenderingContext2D/)
    -   [OffscreenCanvasRenderingContext2D](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasRenderingContext2D/)
    -   [Path2D](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Path2D/)

##### Index

### Methods[](#methods)

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

## Methods[](#methods-1)

### 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
    

### 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
    

### 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
    

### closePath[](#closepath)

-   closePath(): void[](#closepath-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath)
    
    #### Returns void
    

### 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
    

### 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
    

### 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
    

### 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
    

### 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
    

### 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
    
-   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