Phaser Class: BitmapData

new BitmapData(game, key, width, height)

A BitmapData object contains a Canvas element to which you can draw anything you like via normal Canvas context operations. A single BitmapData can be used as the texture for one or many Images/Sprites. So if you need to dynamically create a Sprite texture then they are a good choice.

Parameters:

Name	Type	Argument	Default	Description
`game`	Phaser.Game			A reference to the currently running game.
`key`	string			Internal Phaser reference key for the render texture.
`width`	number	<optional>	256	The width of the BitmapData in pixels.
`height`	number	<optional>	256	The height of the BitmapData in pixels.

Source:

gameobjects/BitmapData.js, line 19

Members

baseTexture

Properties:

Name	Type	Description
`baseTexture`	PIXI.BaseTexture	The PIXI.BaseTexture.

Source:

gameobjects/BitmapData.js, line 101

buffer

Properties:

Name	Type	Description
`buffer`	ArrayBuffer	An ArrayBuffer the same size as the context ImageData.

Source:

gameobjects/BitmapData.js, line 81

canvas

Properties:

Name	Type	Description
`canvas`	HTMLCanvasElement	The canvas to which this BitmapData draws.

Source:

gameobjects/BitmapData.js, line 48

context

Properties:

Name	Type	Description
`context`	CanvasRenderingContext2D	The 2d context of the canvas.

Source:

gameobjects/BitmapData.js, line 54

ctx

Properties:

Name	Type	Description
`ctx`	CanvasRenderingContext2D	A reference to BitmapData.context.

Source:

gameobjects/BitmapData.js, line 59

data

Properties:

Name	Type	Description
`data`	Uint8ClampedArray	A Uint8ClampedArray view into BitmapData.buffer.

Source:

gameobjects/BitmapData.js, line 69

dirty

Properties:

Name	Type	Description
`dirty`	boolean	If dirty this BitmapData will be re-rendered.

Source:

gameobjects/BitmapData.js, line 131

disableTextureUpload

Properties:

Name	Type	Description
`disableTextureUpload`	boolean	If disableTextureUpload is true this BitmapData will never send its image data to the GPU when its dirty flag is true.

Source:

gameobjects/BitmapData.js, line 126

game

Properties:

Name	Type	Description
`game`	Phaser.Game	A reference to the currently running game.

Source:

gameobjects/BitmapData.js, line 27

height

Properties:

Name	Type	Description
`height`	number	The height of the BitmapData in pixels.

Source:

gameobjects/BitmapData.js, line 42

imageData

Properties:

Name	Type	Description
`imageData`	ImageData	The context image data.

Source:

gameobjects/BitmapData.js, line 64

key

Properties:

Name	Type	Description
`key`	string	The key of the BitmapData in the Cache, if stored there.

Source:

gameobjects/BitmapData.js, line 32

pixels

Properties:

Name	Type	Description
`pixels`	Uint32Array	An Uint32Array view into BitmapData.buffer.

Source:

gameobjects/BitmapData.js, line 74

texture

Properties:

Name	Type	Description
`texture`	PIXI.Texture	The PIXI.Texture.

Source:

gameobjects/BitmapData.js, line 107

textureFrame

Properties:

Name	Type	Description
`textureFrame`	Phaser.Frame	The Frame this BitmapData uses for rendering.

Source:

gameobjects/BitmapData.js, line 113

type

Properties:

Name	Type	Description
`type`	number	The const type of this object.

Source:

gameobjects/BitmapData.js, line 121

width

Properties:

Name	Type	Description
`width`	number	The width of the BitmapData in pixels.

Source:

gameobjects/BitmapData.js, line 37

Methods

<static> getTransform(translateX, translateY, scaleX, scaleY, skewX, skewY) → {Object}

Gets a JavaScript object that has 6 properties set that are used by BitmapData in a transform.

Parameters:

Name	Type	Description
`translateX`	number	The x translate value.
`translateY`	number	The y translate value.
`scaleX`	number	The scale x value.
`scaleY`	number	The scale y value.
`skewX`	number	The skew x value.
`skewY`	number	The skew y value.

Source:

gameobjects/BitmapData.js, line 1677

Returns:

A JavaScript object containing all of the properties BitmapData needs for transforms.

Type: Object

add(object) → {Phaser.BitmapData}

Updates the given objects so that they use this BitmapData as their texture. This will replace any texture they will currently have set.

Parameters:

Name	Type	Description
`object`	Phaser.Sprite \| Array.<Phaser.Sprite> \| Phaser.Image \| Array.<Phaser.Image>	Either a single Sprite/Image or an Array of Sprites/Images.

Source:

gameobjects/BitmapData.js, line 206

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

addToWorld(x, y, anchorX, anchorY, scaleX, scaleY) → {Phaser.Image}

Creates a new Phaser.Image object, assigns this BitmapData to be its texture, adds it to the world then returns it.

Parameters:

Name	Type	Argument	Default	Description
`x`	number	<optional>	0	The x coordinate to place the Image at.
`y`	number	<optional>	0	The y coordinate to place the Image at.
`anchorX`	number	<optional>	0	Set the x anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.
`anchorY`	number	<optional>	0	Set the y anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.
`scaleX`	number	<optional>	1	The horizontal scale factor of the Image. A value of 1 means no scaling. 2 would be twice the size, and so on.
`scaleY`	number	<optional>	1	The vertical scale factor of the Image. A value of 1 means no scaling. 2 would be twice the size, and so on.

Source:

gameobjects/BitmapData.js, line 820

Returns:

The newly added Image object.

Type: Phaser.Image

alphaMask(source, mask, sourceRect, maskRect) → {Phaser.BitmapData}

Draws the image onto this BitmapData using an image as an alpha mask.

Parameters:

Name	Type	Argument	Description
`source`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapData \| HTMLImage \| HTMLCanvasElement \| string		The source to copy from. If you give a string it will try and find the Image in the Game.Cache first. This is quite expensive so try to provide the image itself.
`mask`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapData \| HTMLImage \| HTMLCanvasElement \| string	<optional>	The object to be used as the mask. If you give a string it will try and find the Image in the Game.Cache first. This is quite expensive so try to provide the image itself. If you don't provide a mask it will use this BitmapData as the mask.
`sourceRect`	Phaser.Rectangle	<optional>	A Rectangle where x/y define the coordinates to draw the Source image to and width/height define the size.
`maskRect`	Phaser.Rectangle	<optional>	A Rectangle where x/y define the coordinates to draw the Mask image to and width/height define the size.

Source:

gameobjects/BitmapData.js, line 1108

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendAdd() → {Phaser.BitmapData}

Sets the blend mode to 'lighter'

Source:

gameobjects/BitmapData.js, line 1447

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendColor() → {Phaser.BitmapData}

Sets the blend mode to 'color'

Source:

gameobjects/BitmapData.js, line 1629

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendColorBurn() → {Phaser.BitmapData}

Sets the blend mode to 'color-burn'

Source:

gameobjects/BitmapData.js, line 1538

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendColorDodge() → {Phaser.BitmapData}

Sets the blend mode to 'color-dodge'

Source:

gameobjects/BitmapData.js, line 1525

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendDarken() → {Phaser.BitmapData}

Sets the blend mode to 'darken'

Source:

gameobjects/BitmapData.js, line 1499

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendDestinationAtop() → {Phaser.BitmapData}

Sets the blend mode to 'destination-atop'

Source:

gameobjects/BitmapData.js, line 1421

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendDestinationIn() → {Phaser.BitmapData}

Sets the blend mode to 'destination-in'

Source:

gameobjects/BitmapData.js, line 1395

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendDestinationOut() → {Phaser.BitmapData}

Sets the blend mode to 'destination-out'

Source:

gameobjects/BitmapData.js, line 1408

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendDestinationOver() → {Phaser.BitmapData}

Sets the blend mode to 'destination-over'

Source:

gameobjects/BitmapData.js, line 1382

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendDifference() → {Phaser.BitmapData}

Sets the blend mode to 'difference'

Source:

gameobjects/BitmapData.js, line 1577

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendExclusion() → {Phaser.BitmapData}

Sets the blend mode to 'exclusion'

Source:

gameobjects/BitmapData.js, line 1590

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendHardLight() → {Phaser.BitmapData}

Sets the blend mode to 'hard-light'

Source:

gameobjects/BitmapData.js, line 1551

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendHue() → {Phaser.BitmapData}

Sets the blend mode to 'hue'

Source:

gameobjects/BitmapData.js, line 1603

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendLighten() → {Phaser.BitmapData}

Sets the blend mode to 'lighten'

Source:

gameobjects/BitmapData.js, line 1512

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendLuminosity() → {Phaser.BitmapData}

Sets the blend mode to 'luminosity'

Source:

gameobjects/BitmapData.js, line 1642

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendMultiply() → {Phaser.BitmapData}

Sets the blend mode to 'multiply'

Source:

gameobjects/BitmapData.js, line 1460

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendOverlay() → {Phaser.BitmapData}

Sets the blend mode to 'overlay'

Source:

gameobjects/BitmapData.js, line 1486

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendReset() → {Phaser.BitmapData}

Resets the blend mode (effectively sets it to 'source-over')

Source:

gameobjects/BitmapData.js, line 1317

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendSaturation() → {Phaser.BitmapData}

Sets the blend mode to 'saturation'

Source:

gameobjects/BitmapData.js, line 1616

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendScreen() → {Phaser.BitmapData}

Sets the blend mode to 'screen'

Source:

gameobjects/BitmapData.js, line 1473

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendSoftLight() → {Phaser.BitmapData}

Sets the blend mode to 'soft-light'

Source:

gameobjects/BitmapData.js, line 1564

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendSourceAtop() → {Phaser.BitmapData}

Sets the blend mode to 'source-atop'

Source:

gameobjects/BitmapData.js, line 1369

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendSourceIn() → {Phaser.BitmapData}

Sets the blend mode to 'source-in'

Source:

gameobjects/BitmapData.js, line 1343

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendSourceOut() → {Phaser.BitmapData}

Sets the blend mode to 'source-out'

Source:

gameobjects/BitmapData.js, line 1356

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendSourceOver() → {Phaser.BitmapData}

Sets the blend mode to 'source-over'

Source:

gameobjects/BitmapData.js, line 1330

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

blendXor() → {Phaser.BitmapData}

Sets the blend mode to 'xor'

Source:

gameobjects/BitmapData.js, line 1434

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

circle(x, y, radius, fillStyle) → {Phaser.BitmapData}

Draws a filled Circle to the BitmapData at the given x, y coordinates and radius in size.

Parameters:

Name	Type	Argument	Description
`x`	number		The x coordinate to draw the Circle at. This is the center of the circle.
`y`	number		The y coordinate to draw the Circle at. This is the center of the circle.
`radius`	number		The radius of the Circle in pixels. The radius is half the diameter.
`fillStyle`	string	<optional>	If set the context fillStyle will be set to this value before the circle is drawn.

Source:

gameobjects/BitmapData.js, line 1219

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

clear() → {Phaser.BitmapData}

Clears the BitmapData context using a clearRect.

Source:

gameobjects/BitmapData.js, line 271

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

cls()

Clears the BitmapData context using a clearRect.

Source:

gameobjects/BitmapData.js, line 269

copy(source, x, y, width, height, tx, ty, newWidth, newHeight, rotate, anchorX, anchorY, scaleX, scaleY, alpha, blendMode, roundPx) → {Phaser.BitmapData}

Copies a rectangular area from the source object to this BitmapData. If you give null as the source it will copy from itself. You can optionally resize, translate, rotate, scale, alpha or blend as it's drawn. All rotation, scaling and drawing takes place around the regions center point by default, but can be changed with the anchor parameters. Note that the source image can also be this BitmapData, which can create some interesting effects.

This method has a lot of parameters for maximum control. You can use the more friendly methods like copyRect and draw to avoid having to remember them all.

Parameters:

Name	Type	Argument	Default	Description
`source`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapData \| HTMLImage \| HTMLCanvasElement \| string	<optional>		The source to copy from. If you give a string it will try and find the Image in the Game.Cache first. This is quite expensive so try to provide the image itself.
`x`	number	<optional>	0	The x coordinate representing the top-left of the region to copy from the source image.
`y`	number	<optional>	0	The y coordinate representing the top-left of the region to copy from the source image.
`width`	number	<optional>		The width of the region to copy from the source image. If not specified it will use the full source image width.
`height`	number	<optional>		The height of the region to copy from the source image. If not specified it will use the full source image height.
`tx`	number	<optional>		The x coordinate to translate to before drawing. If not specified it will default to the `x` parameter.
`ty`	number	<optional>		The y coordinate to translate to before drawing. If not specified it will default to the `y` parameter.
`newWidth`	number	<optional>		The new width of the block being copied. If not specified it will default to the `width` parameter.
`newHeight`	number	<optional>		The new height of the block being copied. If not specified it will default to the `height` parameter.
`rotate`	number	<optional>	0	The angle in radians to rotate the block to before drawing. Rotation takes place around the center by default, but can be changed with the `anchor` parameters.
`anchorX`	number	<optional>	0	The anchor point around which the block is rotated and scaled. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.
`anchorY`	number	<optional>	0	The anchor point around which the block is rotated and scaled. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.
`scaleX`	number	<optional>	1	The horizontal scale factor of the block. A value of 1 means no scaling. 2 would be twice the size, and so on.
`scaleY`	number	<optional>	1	The vertical scale factor of the block. A value of 1 means no scaling. 2 would be twice the size, and so on.
`alpha`	number	<optional>	1	The alpha that will be set on the context before drawing. A value between 0 (fully transparent) and 1, opaque.
`blendMode`	number	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all.
`roundPx`	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

gameobjects/BitmapData.js, line 846

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

copyRect(source, area, x, y, alpha, blendMode, roundPx) → {Phaser.BitmapData}

Copies the area defined by the Rectangle parameter from the source image to this BitmapData at the given location.

Parameters:

Name	Type	Argument	Default	Description
`source`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapData \| HTMLImage \| string			The Image to copy from. If you give a string it will try and find the Image in the Game.Cache.
`area`	Phaser.Rectangle			The Rectangle region to copy from the source image.
`x`	number			The destination x coordinate to copy the image to.
`y`	number			The destination y coordinate to copy the image to.
`alpha`	number	<optional>	1	The alpha that will be set on the context before drawing. A value between 0 (fully transparent) and 1, opaque.
`blendMode`	number	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all.
`roundPx`	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

gameobjects/BitmapData.js, line 1039

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

draw(source, x, y, width, height, blendMode, roundPx) → {Phaser.BitmapData}

Draws the given Phaser.Sprite, Phaser.Image or Phaser.Text to this BitmapData at the coordinates specified. You can use the optional width and height values to 'stretch' the sprite as it is drawn. This uses drawImage stretching, not scaling. When drawing it will take into account the Sprites rotation, scale and alpha values.

Parameters:

Name	Type	Argument	Default	Description
`source`	Phaser.Sprite \| Phaser.Image \| Phaser.Text			The Sprite, Image or Text object to draw onto this BitmapData.
`x`	number	<optional>	0	The x coordinate to translate to before drawing. If not specified it will default to `source.x`.
`y`	number	<optional>	0	The y coordinate to translate to before drawing. If not specified it will default to `source.y`.
`width`	number	<optional>		The new width of the Sprite being copied. If not specified it will default to `source.width`.
`height`	number	<optional>		The new height of the Sprite being copied. If not specified it will default to `source.height`.
`blendMode`	number	<optional>	null	The composite blend mode that will be used when drawing the Sprite. The default is no blend mode at all.
`roundPx`	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

gameobjects/BitmapData.js, line 1058

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

extract(destination, r, g, b, a, resize, r2, g2, b2) → {Phaser.BitmapData}

Scans this BitmapData for all pixels matching the given r,g,b values and then draws them into the given destination BitmapData. The original BitmapData remains unchanged. The destination BitmapData must be large enough to receive all of the pixels that are scanned unless the 'resize' parameter is true. Although the destination BitmapData is returned from this method, it's actually modified directly in place, meaning this call is perfectly valid: picture.extract(mask, r, g, b) You can specify optional r2, g2, b2 color values. If given the pixel written to the destination bitmap will be of the r2, g2, b2 color. If not given it will be written as the same color it was extracted. You can provide one or more alternative colors, allowing you to tint the color during extraction.

Parameters:

Name	Type	Argument	Default	Description
`destination`	Phaser.BitmapData			The BitmapData that the extracted pixels will be drawn to.
`r`	number			The red color component, in the range 0 - 255.
`g`	number			The green color component, in the range 0 - 255.
`b`	number			The blue color component, in the range 0 - 255.
`a`	number	<optional>	255	The alpha color component, in the range 0 - 255 that the new pixel will be drawn at.
`resize`	boolean	<optional>	false	Should the destination BitmapData be resized to match this one before the pixels are copied?
`r2`	number	<optional>		An alternative red color component to be written to the destination, in the range 0 - 255.
`g2`	number	<optional>		An alternative green color component to be written to the destination, in the range 0 - 255.
`b2`	number	<optional>		An alternative blue color component to be written to the destination, in the range 0 - 255.

Source:

gameobjects/BitmapData.js, line 1142

Returns:

The BitmapData that the extract pixels were drawn on.

Type: Phaser.BitmapData

fill(r, g, b, a) → {Phaser.BitmapData}

Fills the BitmapData with the given color.

Parameters:

Name	Type	Argument	Default	Description
`r`	number			The red color value, between 0 and 0xFF (255).
`g`	number			The green color value, between 0 and 0xFF (255).
`b`	number			The blue color value, between 0 and 0xFF (255).
`a`	number	<optional>	1	The alpha color value, between 0 and 1.

Source:

gameobjects/BitmapData.js, line 291

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

getPixel(x, y, out) → {object}

Get the color of a specific pixel in the context into a color object. If you have drawn anything to the BitmapData since it was created you must call BitmapData.update to refresh the array buffer, otherwise this may return out of date color values, or worse - throw a run-time error as it tries to access an array element that doesn't exist.

Parameters:

Name	Type	Argument	Description
`x`	number		The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`y`	number		The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`out`	object	<optional>	An object into which 4 properties will be created: r, g, b and a. If not provided a new object will be created.

Source:

gameobjects/BitmapData.js, line 737

Returns:

An object with the red, green, blue and alpha values set in the r, g, b and a properties.

Type: object

getPixel32(x, y) → {number}

Get the color of a specific pixel including its alpha value. If you have drawn anything to the BitmapData since it was created you must call BitmapData.update to refresh the array buffer, otherwise this may return out of date color values, or worse - throw a run-time error as it tries to access an array element that doesn't exist. Note that on little-endian systems the format is 0xAABBGGRR and on big-endian the format is 0xRRGGBBAA.

Parameters:

Name	Type	Description
`x`	number	The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`y`	number	The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

Source:

gameobjects/BitmapData.js, line 768

Returns:

A native color value integer (format: 0xAARRGGBB)

Type: number

getPixelRGB(x, y, out, hsl, hsv) → {object}

Get the color of a specific pixel including its alpha value as a color object containing r,g,b,a and rgba properties. If you have drawn anything to the BitmapData since it was created you must call BitmapData.update to refresh the array buffer, otherwise this may return out of date color values, or worse - throw a run-time error as it tries to access an array element that doesn't exist.

Parameters:

Name	Type	Argument	Default	Description
`x`	number			The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`y`	number			The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`out`	object	<optional>		An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.
`hsl`	boolean	<optional>	false	Also convert the rgb values into hsl?
`hsv`	boolean	<optional>	false	Also convert the rgb values into hsv?

Source:

gameobjects/BitmapData.js, line 788

Returns:

An object with the red, green and blue values set in the r, g and b properties.

Type: object

getPixels(rect) → {ImageData}

Gets all the pixels from the region specified by the given Rectangle object.

Parameters:

Name	Type	Description
`rect`	Phaser.Rectangle	The Rectangle region to get.

Source:

gameobjects/BitmapData.js, line 807

Returns:

Returns a ImageData object containing a Uint8ClampedArray data property.

Type: ImageData

load(source) → {Phaser.BitmapData}

Takes the given Game Object, resizes this BitmapData to match it and then draws it into this BitmapDatas canvas, ready for further processing. The source game object is not modified by this operation. If the source object uses a texture as part of a Texture Atlas or Sprite Sheet, only the current frame will be used for sizing. If a string is given it will assume it's a cache key and look in Phaser.Cache for an image key matching the string.

Parameters:

Name	Type	Description
`source`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapData \| HTMLImage \| HTMLCanvasElement \| string	The object that will be used to populate this BitmapData. If you give a string it will try and find the Image in the Game.Cache first.

Source:

gameobjects/BitmapData.js, line 234

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

processPixel(callback, callbackContext, x, y, width, height) → {Phaser.BitmapData}

Scans through the area specified in this BitmapData and sends the color for every pixel to the given callback along with its x and y coordinates. Whatever value the callback returns is set as the new color for that pixel, unless it returns the same color, in which case it's skipped. Note that the format of the color received will be different depending on if the system is big or little endian. It is expected that your callback will deal with endianess. If you'd rather Phaser did it then use processPixelRGB instead. The callback will also be sent the pixels x and y coordinates respectively.

Parameters:

Name	Type	Argument	Default	Description
`callback`	function			The callback that will be sent each pixel color to be processed.
`callbackContext`	object			The context under which the callback will be called.
`x`	number	<optional>	0	The x coordinate of the top-left of the region to process from.
`y`	number	<optional>	0	The y coordinate of the top-left of the region to process from.
`width`	number	<optional>		The width of the region to process.
`height`	number	<optional>		The height of the region to process.

Source:

gameobjects/BitmapData.js, line 451

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

processPixelRGB(callback, callbackContext, x, y, width, height) → {Phaser.BitmapData}

Scans through the area specified in this BitmapData and sends a color object for every pixel to the given callback. The callback will be sent a color object with 6 properties: { r: number, g: number, b: number, a: number, color: number, rgba: string }. Where r, g, b and a are integers between 0 and 255 representing the color component values for red, green, blue and alpha. The color property is an Int32 of the full color. Note the endianess of this will change per system. The rgba property is a CSS style rgba() string which can be used with context.fillStyle calls, among others. The callback will also be sent the pixels x and y coordinates respectively. The callback must return either false, in which case no change will be made to the pixel, or a new color object. If a new color object is returned the pixel will be set to the r, g, b and a color values given within it.

Parameters:

Name	Type	Argument	Default	Description
`callback`	function			The callback that will be sent each pixel color object to be processed.
`callbackContext`	object			The context under which the callback will be called.
`x`	number	<optional>	0	The x coordinate of the top-left of the region to process from.
`y`	number	<optional>	0	The y coordinate of the top-left of the region to process from.
`width`	number	<optional>		The width of the region to process.
`height`	number	<optional>		The height of the region to process.

Source:

gameobjects/BitmapData.js, line 393

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

rect(x, y, width, height, fillStyle) → {Phaser.BitmapData}

Draws a filled Rectangle to the BitmapData at the given x, y coordinates and width / height in size.

Parameters:

Name	Type	Argument	Description
`x`	number		The x coordinate of the top-left of the Rectangle.
`y`	number		The y coordinate of the top-left of the Rectangle.
`width`	number		The width of the Rectangle.
`height`	number		The height of the Rectangle.
`fillStyle`	string	<optional>	If set the context fillStyle will be set to this value before the rect is drawn.

Source:

gameobjects/BitmapData.js, line 1195

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

render() → {Phaser.BitmapData}

If the game is running in WebGL this will push the texture up to the GPU if it's dirty. This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function. If you wish to suppress this functionality set BitmapData.disableTextureUpload to true.

Source:

gameobjects/BitmapData.js, line 1294

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

replaceRGB(r1, g1, b1, a1, r2, g2, b2, a2, region) → {Phaser.BitmapData}

Replaces all pixels matching one color with another. The color values are given as two sets of RGBA values. An optional region parameter controls if the replacement happens in just a specific area of the BitmapData or the entire thing.

Parameters:

Name	Type	Argument	Description
`r1`	number		The red color value to be replaced. Between 0 and 255.
`g1`	number		The green color value to be replaced. Between 0 and 255.
`b1`	number		The blue color value to be replaced. Between 0 and 255.
`a1`	number		The alpha color value to be replaced. Between 0 and 255.
`r2`	number		The red color value that is the replacement color. Between 0 and 255.
`g2`	number		The green color value that is the replacement color. Between 0 and 255.
`b2`	number		The blue color value that is the replacement color. Between 0 and 255.
`a2`	number		The alpha color value that is the replacement color. Between 0 and 255.
`region`	Phaser.Rectangle	<optional>	The area to perform the search over. If not given it will replace over the whole BitmapData.

Source:

gameobjects/BitmapData.js, line 505

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

resize() → {Phaser.BitmapData}

Resizes the BitmapData. This changes the size of the underlying canvas and refreshes the buffer.

Source:

gameobjects/BitmapData.js, line 313

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

setHSL(h, s, l, region) → {Phaser.BitmapData}

Sets the hue, saturation and lightness values on every pixel in the given region, or the whole BitmapData if no region was specified.

Parameters:

Name	Type	Argument	Default	Description
`h`	number	<optional>	null	The hue, in the range 0 - 1.
`s`	number	<optional>	null	The saturation, in the range 0 - 1.
`l`	number	<optional>	null	The lightness, in the range 0 - 1.
`region`	Phaser.Rectangle	<optional>		The area to perform the operation on. If not given it will run over the whole BitmapData.

Source:

gameobjects/BitmapData.js, line 555

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

setPixel(x, y, red, green, blue, alpha, immediate) → {Phaser.BitmapData}

Sets the color of the given pixel to the specified red, green and blue values.

Parameters:

Name	Type	Argument	Default	Description
`x`	number			The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`y`	number			The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`red`	number			The red color value, between 0 and 0xFF (255).
`green`	number			The green color value, between 0 and 0xFF (255).
`blue`	number			The blue color value, between 0 and 0xFF (255).
`alpha`	number			The alpha color value, between 0 and 0xFF (255).
`immediate`	boolean	<optional>	true	If `true` the context.putImageData will be called and the dirty flag set.

Source:

gameobjects/BitmapData.js, line 718

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

setPixel32(x, y, red, green, blue, alpha, immediate) → {Phaser.BitmapData}

Sets the color of the given pixel to the specified red, green, blue and alpha values.

Parameters:

Name	Type	Argument	Default	Description
`x`	number			The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`y`	number			The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.
`red`	number			The red color value, between 0 and 0xFF (255).
`green`	number			The green color value, between 0 and 0xFF (255).
`blue`	number			The blue color value, between 0 and 0xFF (255).
`alpha`	number			The alpha color value, between 0 and 0xFF (255).
`immediate`	boolean	<optional>	true	If `true` the context.putImageData will be called and the dirty flag set.

Source:

gameobjects/BitmapData.js, line 679

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

shadow(color, blur, x, y) → {Phaser.BitmapData}

Sets the shadow properties of this BitmapDatas context which will affect all draw operations made to it. You can cancel an existing shadow by calling this method and passing no parameters. Note: At the time of writing (October 2014) Chrome still doesn't support shadowBlur used with drawImage.

Parameters:

Name	Type	Argument	Default	Description
`color`	string			The color of the shadow, given in a CSS format, i.e. `#000000` or `rgba(0,0,0,1)`. If `null` or `undefined` the shadow will be reset.
`blur`	number	<optional>	5	The amount the shadow will be blurred by. Low values = a crisp shadow, high values = a softer shadow.
`x`	number	<optional>	10	The horizontal offset of the shadow in pixels.
`y`	number	<optional>	10	The vertical offset of the shadow in pixels.

Source:

gameobjects/BitmapData.js, line 1080

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

shiftHSL(h, s, l, region) → {Phaser.BitmapData}

Shifts any or all of the hue, saturation and lightness values on every pixel in the given region, or the whole BitmapData if no region was specified. Shifting will add the given value onto the current h, s and l values, not replace them. The hue is wrapped to keep it within the range 0 to 1. Saturation and lightness are clamped to not exceed 1.

Parameters:

Name	Type	Argument	Default	Description
`h`	number	<optional>	null	The amount to shift the hue by.
`s`	number	<optional>	null	The amount to shift the saturation by.
`l`	number	<optional>	null	The amount to shift the lightness by.
`region`	Phaser.Rectangle	<optional>		The area to perform the operation on. If not given it will run over the whole BitmapData.

Source:

gameobjects/BitmapData.js, line 616

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

textureLine(line, image, repeat) → {Phaser.BitmapData}

Takes the given Line object and image and renders it to this BitmapData as a repeating texture line.

Parameters:

Name	Type	Argument	Default	Description
`line`	Phaser.Line			A Phaser.Line object that will be used to plot the start and end of the line.
`image`	string \| HTMLImage			The key of an image in the Phaser.Cache to use as the texture for this line, or an actual Image.
`repeat`	string	<optional>	'repeat-x'	The pattern repeat mode to use when drawing the line. Either `repeat`, `repeat-x` or `no-repeat`.

Source:

gameobjects/BitmapData.js, line 1246

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData

update(x, y, width, height) → {Phaser.BitmapData}

This re-creates the BitmapData.imageData from the current context. It then re-builds the ArrayBuffer, the data Uint8ClampedArray reference and the pixels Int32Array. If not given the dimensions defaults to the full size of the context.

Parameters:

Name	Type	Argument	Default	Description
`x`	number	<optional>	0	The x coordinate of the top-left of the image data area to grab from.
`y`	number	<optional>	0	The y coordinate of the top-left of the image data area to grab from.
`width`	number	<optional>		The width of the image data area.
`height`	number	<optional>		The height of the image data area.

Source:

gameobjects/BitmapData.js, line 349

Returns:

This BitmapData object for method chaining.

Type: Phaser.BitmapData