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

interface CanvasDrawImage {  
    [drawImage](#drawimage-1)(image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/), dx: number, dy: number): void;  
    [drawImage](#drawimage-2)(  
        image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/),  
        dx: number,  
        dy: number,  
        dw: number,  
        dh: number,  
    ): void;  
    [drawImage](#drawimage-3)(  
        image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/),  
        sx: number,  
        sy: number,  
        sw: number,  
        sh: number,  
        dx: number,  
        dy: number,  
        dw: number,  
        dh: number,  
    ): void;  
}

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

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

[drawImage](#drawimage)

## Methods[](#methods-1)

### drawImage[](#drawimage)

-   drawImage(image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/), dx: number, dy: number): void[](#drawimage-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage)
    
    #### Parameters
    
    -   image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/)
    -   dx: number
    -   dy: number
    
    #### Returns void
    
-   drawImage(  
        image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/),  
        dx: number,  
        dy: number,  
        dw: number,  
        dh: number,  
    ): void[](#drawimage-2)
    
    #### Parameters
    
    -   image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/)
    -   dx: number
    -   dy: number
    -   dw: number
    -   dh: number
    
    #### Returns void
    
-   drawImage(  
        image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/),  
        sx: number,  
        sy: number,  
        sw: number,  
        sh: number,  
        dx: number,  
        dy: number,  
        dw: number,  
        dh: number,  
    ): void[](#drawimage-3)
    
    #### Parameters
    
    -   image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/)
    -   sx: number
    -   sy: number
    -   sw: number
    -   sh: number
    -   dx: number
    -   dy: number
    -   dw: number
    -   dh: number
    
    #### Returns void