PixiJS

Namespace: canvasUtils

PIXI.canvasUtils

Utility methods for Sprite/Texture tinting.

Tinting with the CanvasRenderer involves creating a new canvas to use as a texture, so be aware of the performance implications.

Members

PIXI.canvasUtils.cacheStepsPerColorChannel number static

Number of steps which will be used as a cap when rounding colors.

Default Value:
  • 8

PIXI.canvasUtils.canUseMultiply boolean static

Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.

PIXI.canvasUtils.convertTintToImage boolean static

Tint cache boolean flag.

Default Value:
  • false

PIXI.canvasUtils.tintMethod Function static

The tinting method that will be used.

Methods

PIXI.canvasUtils.getTintedCanvas (sprite, color) HTMLCanvasElement static

canvasUtils.ts:17

Basically this method just needs a sprite and a color and tints the sprite with the given color.

Name Type Description
sprite PIXI.Sprite

the sprite to tint
sprite.texture
color number

the color to use to tint the sprite with
Returns:
Type Description
HTMLCanvasElement The tinted canvas

PIXI.canvasUtils.getTintedPattern (texture, color) HTMLCanvasElement static

canvasUtils.ts:74

Basically this method just needs a sprite and a color and tints the sprite with the given color.

Name Type Description
texture PIXI.Texture

the sprite to tint
color number

the color to use to tint the sprite with
Returns:
Type Description
HTMLCanvasElement The tinted canvas

PIXI.canvasUtils.roundColor (color) number static

canvasUtils.ts:263

Rounds the specified color according to the canvasUtils.cacheStepsPerColorChannel.

Name Type Description
color number

the color to round, should be a hex color
Returns:
Type Description
number The rounded color.

PIXI.canvasUtils.tintWithMultiply (texture, color, canvas) void static

canvasUtils.ts:107

Tint a texture using the 'multiply' operation.

Name Type Description
texture PIXI.Texture

the texture to tint
color number

the color to use to tint the sprite with
canvas HTMLCanvasElement

the current canvas

PIXI.canvasUtils.tintWithOverlay (texture, color, canvas) void static

canvasUtils.ts:165

Tint a texture using the 'overlay' operation.

Name Type Description
texture PIXI.Texture

the texture to tint
color number

the color to use to tint the sprite with
canvas HTMLCanvasElement

the current canvas

PIXI.canvasUtils.tintWithPerPixel (texture, color, canvas) void static

canvasUtils.ts:208

Tint a texture pixel per pixel.

Name Type Description
texture PIXI.Texture

the texture to tint
color number

the color to use to tint the sprite with
canvas HTMLCanvasElement

the current canvas