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

The **`CanvasGradient`** interface represents an opaque object describing a gradient. It is returned by the methods CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createConicGradient() or CanvasRenderingContext2D.createRadialGradient().

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasGradient)

interface CanvasGradient {  
    [addColorStop](#addcolorstop-1)(offset: number, color: string): void;  
}

##### Index

### Methods[](#methods)

[addColorStop](#addcolorstop)

## Methods[](#methods-1)

### addColorStop[](#addcolorstop)

-   addColorStop(offset: number, color: string): void[](#addcolorstop-1)
    
    The **`CanvasGradient.addColorStop()`** method adds a new color stop, defined by an offset and a color, to a given canvas gradient.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasGradient/addColorStop)
    
    #### Parameters
    
    -   offset: number
    -   color: string
    
    #### Returns void