---
title: "CanvasTransform | 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 CanvasTransform

interface CanvasTransform {  
    [getTransform](#gettransform-1)(): [DOMMatrix](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix/);  
    [resetTransform](#resettransform-1)(): void;  
    [rotate](#rotate-1)(angle: number): void;  
    [scale](#scale-1)(x: number, y: number): void;  
    [setTransform](#settransform-1)(  
        a: number,  
        b: number,  
        c: number,  
        d: number,  
        e: number,  
        f: number,  
    ): void;  
    [setTransform](#settransform-2)(transform?: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): void;  
    [transform](#transform-1)(  
        a: number,  
        b: number,  
        c: number,  
        d: number,  
        e: number,  
        f: number,  
    ): void;  
    [translate](#translate-1)(x: number, y: number): void;  
}

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

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

##### Index

### Methods[](#methods)

[getTransform](#gettransform) [resetTransform](#resettransform) [rotate](#rotate) [scale](#scale) [setTransform](#settransform) [transform](#transform) [translate](#translate)

## Methods[](#methods-1)

### getTransform[](#gettransform)

-   getTransform(): [DOMMatrix](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix/)[](#gettransform-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getTransform)
    
    #### Returns [DOMMatrix](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix/)
    

### resetTransform[](#resettransform)

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

### rotate[](#rotate)

-   rotate(angle: number): void[](#rotate-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rotate)
    
    #### Parameters
    
    -   angle: number
    
    #### Returns void
    

### scale[](#scale)

-   scale(x: number, y: number): void[](#scale-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/scale)
    
    #### Parameters
    
    -   x: number
    -   y: number
    
    #### Returns void
    

### setTransform[](#settransform)

-   setTransform(  
        a: number,  
        b: number,  
        c: number,  
        d: number,  
        e: number,  
        f: number,  
    ): void[](#settransform-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setTransform)
    
    #### Parameters
    
    -   a: number
    -   b: number
    -   c: number
    -   d: number
    -   e: number
    -   f: number
    
    #### Returns void
    
-   setTransform(transform?: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): void[](#settransform-2)
    
    #### Parameters
    
    -   `Optional`transform: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)
    
    #### Returns void
    

### transform[](#transform)

-   transform(  
        a: number,  
        b: number,  
        c: number,  
        d: number,  
        e: number,  
        f: number,  
    ): void[](#transform-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/transform)
    
    #### Parameters
    
    -   a: number
    -   b: number
    -   c: number
    -   d: number
    -   e: number
    -   f: number
    
    #### Returns void
    

### translate[](#translate)

-   translate(x: number, y: number): void[](#translate-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/translate)
    
    #### Parameters
    
    -   x: number
    -   y: number
    
    #### Returns void