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

interface CanvasFillStrokeStyles {  
    [fillStyle](#fillstyle): string | [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/) | [CanvasPattern](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPattern/);  
    [strokeStyle](#strokestyle): string | [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/) | [CanvasPattern](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPattern/);  
    [createConicGradient](#createconicgradient-1)(  
        startAngle: number,  
        x: number,  
        y: number,  
    ): [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/);  
    [createLinearGradient](#createlineargradient-1)(  
        x0: number,  
        y0: number,  
        x1: number,  
        y1: number,  
    ): [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/);  
    [createPattern](#createpattern-1)(  
        image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/),  
        repetition: string | null,  
    ): [CanvasPattern](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPattern/) | null;  
    [createRadialGradient](#createradialgradient-1)(  
        x0: number,  
        y0: number,  
        r0: number,  
        x1: number,  
        y1: number,  
        r1: number,  
    ): [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/);  
}

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

-   CanvasFillStrokeStyles
    -   [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

### Properties[](#properties)

[fillStyle](#fillstyle) [strokeStyle](#strokestyle)

### Methods[](#methods)

[createConicGradient](#createconicgradient) [createLinearGradient](#createlineargradient) [createPattern](#createpattern) [createRadialGradient](#createradialgradient)

## Properties[](#properties-1)

### fillStyle[](#fillstyle)

fillStyle: string | [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/) | [CanvasPattern](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPattern/)

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

### strokeStyle[](#strokestyle)

strokeStyle: string | [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/) | [CanvasPattern](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPattern/)

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

## Methods[](#methods-1)

### createConicGradient[](#createconicgradient)

-   createConicGradient(startAngle: number, x: number, y: number): [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/)[](#createconicgradient-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createConicGradient)
    
    #### Parameters
    
    -   startAngle: number
    -   x: number
    -   y: number
    
    #### Returns [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/)
    

### createLinearGradient[](#createlineargradient)

-   createLinearGradient(  
        x0: number,  
        y0: number,  
        x1: number,  
        y1: number,  
    ): [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/)[](#createlineargradient-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createLinearGradient)
    
    #### Parameters
    
    -   x0: number
    -   y0: number
    -   x1: number
    -   y1: number
    
    #### Returns [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/)
    

### createPattern[](#createpattern)

-   createPattern(  
        image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/),  
        repetition: string | null,  
    ): [CanvasPattern](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPattern/) | null[](#createpattern-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern)
    
    #### Parameters
    
    -   image: [CanvasImageSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CanvasImageSource/)
    -   repetition: string | null
    
    #### Returns [CanvasPattern](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasPattern/) | null
    

### createRadialGradient[](#createradialgradient)

-   createRadialGradient(  
        x0: number,  
        y0: number,  
        r0: number,  
        x1: number,  
        y1: number,  
        r1: number,  
    ): [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/)[](#createradialgradient-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createRadialGradient)
    
    #### Parameters
    
    -   x0: number
    -   y0: number
    -   r0: number
    -   x1: number
    -   y1: number
    -   r1: number
    
    #### Returns [CanvasGradient](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CanvasGradient/)