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

interface CanvasImageData {  
    [createImageData](#createimagedata-1)(  
        sw: number,  
        sh: number,  
        settings?: [ImageDataSettings](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageDataSettings/),  
    ): [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/);  
    [createImageData](#createimagedata-2)(imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)): [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/);  
    [getImageData](#getimagedata-1)(  
        sx: number,  
        sy: number,  
        sw: number,  
        sh: number,  
        settings?: [ImageDataSettings](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageDataSettings/),  
    ): [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/);  
    [putImageData](#putimagedata-1)(imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/), dx: number, dy: number): void;  
    [putImageData](#putimagedata-2)(  
        imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/),  
        dx: number,  
        dy: number,  
        dirtyX: number,  
        dirtyY: number,  
        dirtyWidth: number,  
        dirtyHeight: number,  
    ): void;  
}

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

-   CanvasImageData
    -   [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)

[createImageData](#createimagedata) [getImageData](#getimagedata) [putImageData](#putimagedata)

## Methods[](#methods-1)

### createImageData[](#createimagedata)

-   createImageData(sw: number, sh: number, settings?: [ImageDataSettings](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageDataSettings/)): [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)[](#createimagedata-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createImageData)
    
    #### Parameters
    
    -   sw: number
    -   sh: number
    -   `Optional`settings: [ImageDataSettings](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageDataSettings/)
    
    #### Returns [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)
    
-   createImageData(imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)): [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)[](#createimagedata-2)
    
    #### Parameters
    
    -   imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)
    
    #### Returns [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)
    

### getImageData[](#getimagedata)

-   getImageData(  
        sx: number,  
        sy: number,  
        sw: number,  
        sh: number,  
        settings?: [ImageDataSettings](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageDataSettings/),  
    ): [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)[](#getimagedata-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getImageData)
    
    #### Parameters
    
    -   sx: number
    -   sy: number
    -   sw: number
    -   sh: number
    -   `Optional`settings: [ImageDataSettings](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageDataSettings/)
    
    #### Returns [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)
    

### putImageData[](#putimagedata)

-   putImageData(imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/), dx: number, dy: number): void[](#putimagedata-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/putImageData)
    
    #### Parameters
    
    -   imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)
    -   dx: number
    -   dy: number
    
    #### Returns void
    
-   putImageData(  
        imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/),  
        dx: number,  
        dy: number,  
        dirtyX: number,  
        dirtyY: number,  
        dirtyWidth: number,  
        dirtyHeight: number,  
    ): void[](#putimagedata-2)
    
    #### Parameters
    
    -   imageData: [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)
    -   dx: number
    -   dy: number
    -   dirtyX: number
    -   dirtyY: number
    -   dirtyWidth: number
    -   dirtyHeight: number
    
    #### Returns void