--- title: "Painter | 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. # Class Painter #### Internal[](#internal) Initialize a new painter object. ##### Index ### Constructors[](#constructors) [constructor](#constructor) ### Properties[](#properties) [cache](#cache) [context](#context) [crossTileSymbolIndex](#crosstilesymbolindex) [currentLayer](#currentlayer) [currentStencilSource](#currentstencilsource) [debugBuffer](#debugbuffer) [debugOverlayCanvas](#debugoverlaycanvas) [debugOverlayTexture](#debugoverlaytexture) [debugSegments](#debugsegments) [depthEpsilon](#depthepsilon) [depthRangeFor3D](#depthrangefor3d) [drawFunctions](#drawfunctions) [emptyProgramConfiguration](#emptyprogramconfiguration) [glyphManager](#glyphmanager) [height](#height) [id](#id) [imageManager](#imagemanager) [lineAtlas](#lineatlas) [nextStencilID](#nextstencilid) [numSublayers](#numsublayers) [opaquePassCutoff](#opaquepasscutoff) [options](#options) [pixelRatio](#pixelratio) [quadTriangleIndexBuffer](#quadtriangleindexbuffer) [rasterBoundsBuffer](#rasterboundsbuffer) [rasterBoundsBufferPosOnly](#rasterboundsbufferposonly) [rasterBoundsSegments](#rasterboundssegments) [rasterBoundsSegmentsPosOnly](#rasterboundssegmentsposonly) [renderPass](#renderpass) [renderToTexture](#rendertotexture) [stencilClearMode](#stencilclearmode) [style](#style) [symbolFadeChange](#symbolfadechange) [terrainFacilitator](#terrainfacilitator) [tileBorderIndexBuffer](#tileborderindexbuffer) [tileExtentBuffer](#tileextentbuffer) [tileExtentMesh](#tileextentmesh) [tileExtentSegments](#tileextentsegments) [transform](#transform) [viewportBuffer](#viewportbuffer) [viewportSegments](#viewportsegments) [width](#width) [MAX\_TEXTURE\_POOL\_SIZE\_PER\_BUCKET](#max_texture_pool_size_per_bucket) ### Methods[](#methods) [clearStencil](#clearstencil) [colorModeForRenderPass](#colormodeforrenderpass) [destroy](#destroy) [getDepthModeFor3D](#getdepthmodefor3d) [getDepthModeForSublayer](#getdepthmodeforsublayer) [getStencilConfigForOverlapAndUpdateStencilID](#getstencilconfigforoverlapandupdatestencilid) [getTileTexture](#gettiletexture) [initDebugOverlayCanvas](#initdebugoverlaycanvas) [isPatternMissing](#ispatternmissing) [maybeDrawCoords](#maybedrawcoords) [maybeDrawDepth](#maybedrawdepth) [opaquePassEnabledForLayer](#opaquepassenabledforlayer) [overLimit](#overlimit) [render](#render) [renderLayer](#renderlayer) [resize](#resize) [saveTileTexture](#savetiletexture) [setBaseState](#setbasestate) [setCustomLayerDefaults](#setcustomlayerdefaults) [setup](#setup) [stencilConfigForOverlapTwoPass](#stencilconfigforoverlaptwopass) [stencilModeFor3D](#stencilmodefor3d) [stencilModeForClipping](#stencilmodeforclipping) [useProgram](#useprogram) ## Constructors[](#constructors-1) ### constructor[](#constructor) - new Painter(     gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/),     transform: [IReadonlyTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.IReadonlyTransform/), ): Painter[](#constructorpainter) #### Parameters - gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/) - transform: [IReadonlyTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.IReadonlyTransform/) #### Returns Painter ## Properties[](#properties-1) ### cache[](#cache) cache: { \[\_: string\]: [Program](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Program/) } ### context[](#context) context: [Context](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Context/) ### crossTileSymbolIndex[](#crosstilesymbolindex) crossTileSymbolIndex: [CrossTileSymbolIndex](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CrossTileSymbolIndex/) ### currentLayer[](#currentlayer) currentLayer: number ### currentStencilSource[](#currentstencilsource) currentStencilSource: string ### debugBuffer[](#debugbuffer) debugBuffer: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/) ### debugOverlayCanvas[](#debugoverlaycanvas) debugOverlayCanvas: [HTMLCanvasElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCanvasElement/) ### debugOverlayTexture[](#debugoverlaytexture) debugOverlayTexture: [Texture](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Texture/) ### debugSegments[](#debugsegments) debugSegments: [SegmentVector](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SegmentVector/) ### depthEpsilon[](#depthepsilon) depthEpsilon: number ### depthRangeFor3D[](#depthrangefor3d) depthRangeFor3D: [DepthRangeType](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.DepthRangeType/) ### drawFunctions[](#drawfunctions) drawFunctions: [DrawFunctions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.DrawFunctions/) ### emptyProgramConfiguration[](#emptyprogramconfiguration) emptyProgramConfiguration: [ProgramConfiguration](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ProgramConfiguration/) ### glyphManager[](#glyphmanager) glyphManager: [GlyphManager](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GlyphManager/) ### height[](#height) height: number ### id[](#id) id: string ### imageManager[](#imagemanager) imageManager: [ImageManager](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImageManager/) ### lineAtlas[](#lineatlas) lineAtlas: [LineAtlas](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineAtlas/) ### nextStencilID[](#nextstencilid) nextStencilID: number ### numSublayers[](#numsublayers) numSublayers: number ### opaquePassCutoff[](#opaquepasscutoff) opaquePassCutoff: number ### options[](#options) options: [PainterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PainterOptions/) ### pixelRatio[](#pixelratio) pixelRatio: number ### quadTriangleIndexBuffer[](#quadtriangleindexbuffer) quadTriangleIndexBuffer: [IndexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.IndexBuffer/) ### rasterBoundsBuffer[](#rasterboundsbuffer) rasterBoundsBuffer: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/) ### rasterBoundsBufferPosOnly[](#rasterboundsbufferposonly) rasterBoundsBufferPosOnly: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/) ### rasterBoundsSegments[](#rasterboundssegments) rasterBoundsSegments: [SegmentVector](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SegmentVector/) ### rasterBoundsSegmentsPosOnly[](#rasterboundssegmentsposonly) rasterBoundsSegmentsPosOnly: [SegmentVector](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SegmentVector/) ### renderPass[](#renderpass) renderPass: [RenderPass](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.RenderPass/) ### renderToTexture[](#rendertotexture) renderToTexture: [IRenderToTexture](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.IRenderToTexture/) ### stencilClearMode[](#stencilclearmode) stencilClearMode: [StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/) ### style[](#style) style: [Style](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Style/) ### symbolFadeChange[](#symbolfadechange) symbolFadeChange: number ### terrainFacilitator[](#terrainfacilitator) terrainFacilitator: {     coordsDirty: boolean;     depthDirty: boolean;     matrix: [mat4](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.mat4/);     renderTime: number; } ### tileBorderIndexBuffer[](#tileborderindexbuffer) tileBorderIndexBuffer: [IndexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.IndexBuffer/) ### tileExtentBuffer[](#tileextentbuffer) tileExtentBuffer: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/) ### tileExtentMesh[](#tileextentmesh) tileExtentMesh: [Mesh](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Mesh/) ### tileExtentSegments[](#tileextentsegments) tileExtentSegments: [SegmentVector](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SegmentVector/) ### transform[](#transform) transform: [IReadonlyTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.IReadonlyTransform/) ### viewportBuffer[](#viewportbuffer) viewportBuffer: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/) ### viewportSegments[](#viewportsegments) viewportSegments: [SegmentVector](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SegmentVector/) ### width[](#width) width: number ### `Static` `Readonly`MAX\_TEXTURE\_POOL\_SIZE\_PER\_BUCKET[](#max_texture_pool_size_per_bucket) MAX\_TEXTURE\_POOL\_SIZE\_PER\_BUCKET: 50 ## Methods[](#methods-1) ### clearStencil[](#clearstencil) - clearStencil(): void[](#clearstencil-1) #### Returns void ### colorModeForRenderPass[](#colormodeforrenderpass) - colorModeForRenderPass(): [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[ColorMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ColorMode/)\>[](#colormodeforrenderpass-1) #### Returns [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[ColorMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ColorMode/)\> ### destroy[](#destroy) - destroy(): void[](#destroy-1) #### Returns void ### getDepthModeFor3D[](#getdepthmodefor3d) - getDepthModeFor3D(): [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[DepthMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DepthMode/)\>[](#getdepthmodefor3d-1) #### Returns [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[DepthMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DepthMode/)\> ### getDepthModeForSublayer[](#getdepthmodeforsublayer) - getDepthModeForSublayer(     n: number,     mask: boolean,     func?: [CompareFuncType](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CompareFuncType/) | null, ): [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[DepthMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DepthMode/)\>[](#getdepthmodeforsublayer-1) #### Parameters - n: number - mask: boolean - `Optional`func: [CompareFuncType](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CompareFuncType/) | null #### Returns [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[DepthMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DepthMode/)\> ### getStencilConfigForOverlapAndUpdateStencilID[](#getstencilconfigforoverlapandupdatestencilid) - getStencilConfigForOverlapAndUpdateStencilID(     tileIDs: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\], ): \[{ \[\_: number\]: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)\> }, [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\]\][](#getstencilconfigforoverlapandupdatestencilid-1) #### Parameters - tileIDs: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\] #### Returns \[{ \[\_: number\]: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)\> }, [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\]\] ### getTileTexture[](#gettiletexture) - getTileTexture(size: number): [Texture](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Texture/)[](#gettiletexture-1) #### Parameters - size: number #### Returns [Texture](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Texture/) ### initDebugOverlayCanvas[](#initdebugoverlaycanvas) - initDebugOverlayCanvas(): void[](#initdebugoverlaycanvas-1) #### Returns void ### isPatternMissing[](#ispatternmissing) - isPatternMissing(image?: [CrossFaded](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CrossFaded/)<[ResolvedImage](https://docs.maptiler.com/sdk-js/api-reference/classes/ResolvedImage/)\> | null): boolean[](#ispatternmissing-1) Checks whether a pattern image is needed, and if it is, whether it is not loaded. #### Parameters - `Optional`image: [CrossFaded](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CrossFaded/)<[ResolvedImage](https://docs.maptiler.com/sdk-js/api-reference/classes/ResolvedImage/)\> | null #### Returns boolean true if a needed image is missing and rendering needs to be skipped. ### maybeDrawCoords[](#maybedrawcoords) - maybeDrawCoords(): void[](#maybedrawcoords-1) Render the coords framebuffer if it is coordsDirty #### Returns void ### maybeDrawDepth[](#maybedrawdepth) - maybeDrawDepth(requireExact: boolean): void[](#maybedrawdepth-1) Update the depth framebuffer if the camera has moved or tiles have reloaded. Marks coords as depthDirty so they are re-rendered on next demand. #### Parameters - requireExact: boolean #### Returns void ### opaquePassEnabledForLayer[](#opaquepassenabledforlayer) - opaquePassEnabledForLayer(): boolean[](#opaquepassenabledforlayer-1) #### Returns boolean ### overLimit[](#overlimit) - overLimit(): boolean[](#overlimit-1) #### Returns boolean ### render[](#render) - render(style: [Style](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Style/), options: [PainterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PainterOptions/)): void[](#render-1) #### Parameters - style: [Style](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Style/) - options: [PainterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PainterOptions/) #### Returns void ### renderLayer[](#renderlayer) - renderLayer(     painter: Painter,     tileManager: [TileManager](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TileManager/),     layer: [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/),     coords: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\],     renderOptions: [RenderOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.RenderOptions/), ): void[](#renderlayer-1) #### Parameters - painter: Painter - tileManager: [TileManager](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TileManager/) - layer: [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/) - coords: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\] - renderOptions: [RenderOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.RenderOptions/) #### Returns void ### resize[](#resize) - resize(width: number, height: number, pixelRatio: number): void[](#resize-1) #### Parameters - width: number - height: number - pixelRatio: number #### Returns void ### saveTileTexture[](#savetiletexture) - saveTileTexture(texture: [Texture](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Texture/)): void[](#savetiletexture-1) #### Parameters - texture: [Texture](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Texture/) #### Returns void ### setBaseState[](#setbasestate) - setBaseState(): void[](#setbasestate-1) #### Returns void ### setCustomLayerDefaults[](#setcustomlayerdefaults) - setCustomLayerDefaults(): void[](#setcustomlayerdefaults-1) #### Returns void ### setup[](#setup) - setup(): void[](#setup-1) #### Returns void ### stencilConfigForOverlapTwoPass[](#stencilconfigforoverlaptwopass) - stencilConfigForOverlapTwoPass(     tileIDs: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\], ): \[     { \[\_: number\]: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)\> },     { \[\_: number\]: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)\> },     [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\], \][](#stencilconfigforoverlaptwopass-1) #### Parameters - tileIDs: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\] #### Returns \[     { \[\_: number\]: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)\> },     { \[\_: number\]: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<[StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)\> },     [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\], \] ### stencilModeFor3D[](#stencilmodefor3d) - stencilModeFor3D(): [StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)[](#stencilmodefor3d-1) #### Returns [StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/) ### stencilModeForClipping[](#stencilmodeforclipping) - stencilModeForClipping(tileID: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)): [StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/)[](#stencilmodeforclipping-1) #### Parameters - tileID: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/) #### Returns [StencilMode](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StencilMode/) ### useProgram[](#useprogram) - useProgram(     name: string,     programConfiguration?: [ProgramConfiguration](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ProgramConfiguration/) | null,     forceSimpleProjection?: boolean,     defines?: string\[\], ): [Program](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Program/)[](#useprogram-1) Finds the required shader and its variant (base/terrain/globe, etc.) and binds it, compiling a new shader if required. #### Parameters - name: string Name of the desired shader. - `Optional`programConfiguration: [ProgramConfiguration](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ProgramConfiguration/) | null Configuration of shader's inputs. - `Optional`forceSimpleProjection: boolean Whether to force the use of a shader variant with simple mercator projection vertex shader. - `Optional`defines: string\[\] Additional macros to be injected at the beginning of the shader. Expected format is `['#define XYZ']`, etc. False by default. Use true when drawing with a simple projection matrix is desired, eg. when drawing a fullscreen quad. #### Returns [Program](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Program/)