Class: BitmapData

Members

baseTexture : PIXI.BaseTexture

The PIXI.BaseTexture.

Type:

• PIXI.BaseTexture

Source:

src/gameobjects/BitmapData.js line 122

canvas : HTMLCanvasElement

The canvas to which this BitmapData draws.

Type:

• HTMLCanvasElement

Source:

src/gameobjects/BitmapData.js line 54

context : CanvasRenderingContext2D

The 2d context of the canvas.

Type:

• CanvasRenderingContext2D

Source:

src/gameobjects/BitmapData.js line 60

ctx : CanvasRenderingContext2D

A reference to BitmapData.context.

Type:

• CanvasRenderingContext2D

Source:

src/gameobjects/BitmapData.js line 65

data : Uint8ClampedArray

A Uint8ClampedArray view into BitmapData.buffer. Note that this is unavailable in some browsers (such as Epic Browser due to its security restrictions)

Type:

• Uint8ClampedArray

Source:

src/gameobjects/BitmapData.js line 84

dirty : boolean

If dirty this BitmapData will be re-rendered.

Type:

• boolean

Source:

src/gameobjects/BitmapData.js line 157

disableTextureUpload : boolean

If disableTextureUpload is true this BitmapData will never send its image data to the GPU when its dirty flag is true.

Type:

• boolean

Source:

src/gameobjects/BitmapData.js line 152

frameData : Phaser.FrameData

The FrameData container this BitmapData uses for rendering.

Type:

• Phaser.FrameData

Source:

src/gameobjects/BitmapData.js line 133

game : Phaser.Game

A reference to the currently running game.

Type:

• Phaser.Game

Source:

src/gameobjects/BitmapData.js line 33

height : number

The height of the BitmapData in pixels.

Type:

• number

Source:

src/gameobjects/BitmapData.js line 48

imageData : ImageData

The context image data. Please note that a call to BitmapData.draw() or BitmapData.copy() does not update immediately this property for performance reason. Use BitmapData.update() to do so. This property is updated automatically after the first game loop, according to the dirty flag property.

Type:

• ImageData

Source:

src/gameobjects/BitmapData.js line 77

key : string

The key of the BitmapData in the Cache, if stored there.

Type:

• string

Source:

src/gameobjects/BitmapData.js line 38

op : string

A short-hand code to get or set the global composite operation of the BitmapDatas canvas.

Type:

• string

Source:

src/gameobjects/BitmapData.js line 2478

pixels : Uint32Array

An Uint32Array view into BitmapData.buffer.

Type:

• Uint32Array

Source:

src/gameobjects/BitmapData.js line 94

smoothed : boolean

Gets or sets this BitmapData.contexts smoothing enabled value.

Type:

• boolean

Source:

src/gameobjects/BitmapData.js line 2460

smoothProperty : string

The context property needed for smoothing this Canvas.

Type:

• string

Source:

src/gameobjects/BitmapData.js line 70

texture : PIXI.Texture

The PIXI.Texture.

Type:

• PIXI.Texture

Source:

src/gameobjects/BitmapData.js line 128

textureFrame : Phaser.Frame

The Frame this BitmapData uses for rendering.

Type:

• Phaser.Frame

Source:

src/gameobjects/BitmapData.js line 139

type : number

The const type of this object.

Type:

• number

Source:

src/gameobjects/BitmapData.js line 147

width : number

The width of the BitmapData in pixels.

Type:

• number

Source:

src/gameobjects/BitmapData.js line 43

Methods

<static> getTransform(translateX, translateY, scaleX, scaleY, skewX, skewY)

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:

src/gameobjects/BitmapData.js line 2496

Returns:

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

Type

object

add(object)

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:

src/gameobjects/BitmapData.js line 387

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

addToWorld( [x] [, y] [, anchorX] [, anchorY] [, scaleX] [, scaleY])

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:

src/gameobjects/BitmapData.js line 1232

Returns:

The newly added Image object.

Type

Phaser.Image

alphaMask(source [, mask] [, sourceRect] [, maskRect])

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 | Image | 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 | Image | 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:

src/gameobjects/BitmapData.js line 1780

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendAdd()

Sets the blend mode to 'lighter'

Source:

src/gameobjects/BitmapData.js line 2240

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendColor()

Sets the blend mode to 'color'

Source:

src/gameobjects/BitmapData.js line 2408

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendColorBurn()

Sets the blend mode to 'color-burn'

Source:

src/gameobjects/BitmapData.js line 2324

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendColorDodge()

Sets the blend mode to 'color-dodge'

Source:

src/gameobjects/BitmapData.js line 2312

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendDarken()

Sets the blend mode to 'darken'

Source:

src/gameobjects/BitmapData.js line 2288

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendDestinationAtop()

Sets the blend mode to 'destination-atop'

Source:

src/gameobjects/BitmapData.js line 2216

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendDestinationIn()

Sets the blend mode to 'destination-in'

Source:

src/gameobjects/BitmapData.js line 2192

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendDestinationOut()

Sets the blend mode to 'destination-out'

Source:

src/gameobjects/BitmapData.js line 2204

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendDestinationOver()

Sets the blend mode to 'destination-over'

Source:

src/gameobjects/BitmapData.js line 2180

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendDifference()

Sets the blend mode to 'difference'

Source:

src/gameobjects/BitmapData.js line 2360

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendExclusion()

Sets the blend mode to 'exclusion'

Source:

src/gameobjects/BitmapData.js line 2372

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendHardLight()

Sets the blend mode to 'hard-light'

Source:

src/gameobjects/BitmapData.js line 2336

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendHue()

Sets the blend mode to 'hue'

Source:

src/gameobjects/BitmapData.js line 2384

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendLighten()

Sets the blend mode to 'lighten'

Source:

src/gameobjects/BitmapData.js line 2300

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendLuminosity()

Sets the blend mode to 'luminosity'

Source:

src/gameobjects/BitmapData.js line 2420

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendMultiply()

Sets the blend mode to 'multiply'

Source:

src/gameobjects/BitmapData.js line 2252

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendOverlay()

Sets the blend mode to 'overlay'

Source:

src/gameobjects/BitmapData.js line 2276

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendReset()

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

Source:

src/gameobjects/BitmapData.js line 2120

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendSaturation()

Sets the blend mode to 'saturation'

Source:

src/gameobjects/BitmapData.js line 2396

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendScreen()

Sets the blend mode to 'screen'

Source:

src/gameobjects/BitmapData.js line 2264

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendSoftLight()

Sets the blend mode to 'soft-light'

Source:

src/gameobjects/BitmapData.js line 2348

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendSourceAtop()

Sets the blend mode to 'source-atop'

Source:

src/gameobjects/BitmapData.js line 2168

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendSourceIn()

Sets the blend mode to 'source-in'

Source:

src/gameobjects/BitmapData.js line 2144

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendSourceOut()

Sets the blend mode to 'source-out'

Source:

src/gameobjects/BitmapData.js line 2156

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendSourceOver()

Sets the blend mode to 'source-over'

Source:

src/gameobjects/BitmapData.js line 2132

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

blendXor()

Sets the blend mode to 'xor'

Source:

src/gameobjects/BitmapData.js line 2228

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

circle(x, y, radius [, fillStyle])

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:

src/gameobjects/BitmapData.js line 1929

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

clear( [x] [, y] [, width] [, height])

Clears the BitmapData context using a clearRect.

You can optionally define the area to clear. If the arguments are left empty it will clear the entire canvas.

You may need to call BitmapData.update after this in order to clear out the pixel data, but Phaser will not do this automatically for you.

Parameters:

Name	Type	Argument	Default	Description
x	number	<optional>	0	The x coordinate of the top-left of the area to clear.
y	number	<optional>	0	The y coordinate of the top-left of the area to clear.
width	number	<optional>		The width of the area to clear. If undefined it will use BitmapData.width.
height	number	<optional>		The height of the area to clear. If undefined it will use BitmapData.height.

Source:

src/gameobjects/BitmapData.js line 455

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

cls()

Clears the BitmapData context using a clearRect.

Source:

src/gameobjects/BitmapData.js line 449

copy( [source] [, x] [, y] [, width] [, height] [, tx] [, ty] [, newWidth] [, newHeight] [, rotate] [, anchorX] [, anchorY] [, scaleX] [, scaleY] [, alpha] [, blendMode] [, roundPx])

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.

You may prefer to use copyTransform if you're simply trying to draw a Sprite to this BitmapData, and don't wish to translate, scale or rotate it from its original values.

Parameters:

Name	Type	Argument	Default	Description
source	Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapData | Phaser.RenderTexture | Image | 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. If null and source is a Display Object, it will default to source.x.
ty	number	<optional>		The y coordinate to translate to before drawing. If not specified it will default to the y parameter. If null and source is a Display Object, it will default to source.y.
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	string	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.
roundPx	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

src/gameobjects/BitmapData.js line 1257

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

copyBitmapData( [source] [, x] [, y])

Updates a portion of the BitmapData from a source Bitmap. This optimization is important if calling update() on a large Bitmap is causing performance issues. Make sure you use getPixel32() instead of getPixel(). This does not work with floating point numbers for x and y.

Parameters:

Name	Type	Argument	Description
source	Phaser.BitmapData	<optional>	The BitmapData you wish to copy.
x	number	<optional>	The x coordinate of the top-left of the area to copy.
y	number	<optional>	The y coordinate of the top-left of the area to copy.

Source:

src/gameobjects/BitmapData.js line 2432

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

copyRect(source, area, x, y [, alpha] [, blendMode] [, roundPx])

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 | Phaser.RenderTexture | Image | 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	string	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.
roundPx	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

src/gameobjects/BitmapData.js line 1584

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

copyTransform( [source] [, blendMode] [, roundPx])

Draws the given source Game Object to this BitmapData, using its worldTransform property to set the position, scale and rotation of where it is drawn. This function is used internally by drawGroup. It takes the objects tint and scale mode into consideration before drawing.

You can optionally specify Blend Mode and Round Pixels arguments.

Parameters:

Name	Type	Argument	Default	Description
source	Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapData | Phaser.BitmapText	<optional>		The Game Object to draw.
blendMode	string	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.
roundPx	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

src/gameobjects/BitmapData.js line 1477

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

destroy()

Destroys this BitmapData and puts the canvas it was using back into the canvas pool for re-use.

Source:

src/gameobjects/BitmapData.js line 2106

draw(source [, x] [, y] [, width] [, height] [, blendMode] [, roundPx])

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.

The children will be drawn at their x and y world space coordinates. If this is outside the bounds of the BitmapData they won't be visible. When drawing it will take into account the rotation, scale, scaleMode, alpha and tint values.

Note: You should ensure that at least 1 full update has taken place before calling this, otherwise the objects are likely to render incorrectly, if at all. You can trigger an update yourself by calling stage.updateTransform() before calling draw.

Parameters:

Name	Type	Argument	Default	Description
source	Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.RenderTexture			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	string	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.
roundPx	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

src/gameobjects/BitmapData.js line 1602

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

drawFull(parent [, blendMode] [, roundPx])

Draws the Game Object or Group to this BitmapData and then recursively iterates through all of its children.

If a child has an exists property then it (and its children) will be only be drawn if exists is true.

The children will be drawn at their x and y world space coordinates. If this is outside the bounds of the BitmapData they won't be drawn. Depending on your requirements you may need to resize the BitmapData in advance to match the bounds of the top-level Game Object.

When drawing it will take into account the child's world rotation, scale and alpha values.

It's perfectly valid to pass in game.world as the parent object, and it will iterate through the entire display list.

Note: If you are trying to grab your entire game at the start of a State then you should ensure that at least 1 full update has taken place before doing so, otherwise all of the objects will render with incorrect positions and scales. You can trigger an update yourself by calling stage.updateTransform() before calling drawFull.

Parameters:

Name	Type	Argument	Default	Description
parent	Phaser.World | Phaser.Group | Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapText			The Game Object to draw onto this BitmapData and then recursively draw all of its children.
blendMode	string	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.
roundPx	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

src/gameobjects/BitmapData.js line 1692

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

drawGroup(group [, blendMode] [, roundPx])

Draws the immediate children of a Phaser.Group to this BitmapData.

It's perfectly valid to pass in game.world as the Group, and it will iterate through the entire display list.

Children are drawn only if they have their exists property set to true, and have image, or RenderTexture, based Textures.

The children will be drawn at their x and y world space coordinates. If this is outside the bounds of the BitmapData they won't be visible. When drawing it will take into account the rotation, scale, scaleMode, alpha and tint values.

Note: You should ensure that at least 1 full update has taken place before calling this, otherwise the objects are likely to render incorrectly, if at all. You can trigger an update yourself by calling stage.updateTransform() before calling drawGroup.

Parameters:

Name	Type	Argument	Default	Description
group	Phaser.Group			The Group to draw onto this BitmapData. Can also be Phaser.World.
blendMode	string	<optional>	null	The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.
roundPx	boolean	<optional>	false	Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Source:

src/gameobjects/BitmapData.js line 1629

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

extract(destination, r, g, b [, a] [, resize] [, r2] [, g2] [, b2])

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:

src/gameobjects/BitmapData.js line 1813

Returns:

The BitmapData that the extract pixels were drawn on.

Type

Phaser.BitmapData

fill(r, g, b [, a])

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:

src/gameobjects/BitmapData.js line 485

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

generateTexture(key [, callback] [, callbackContext])

Creates a new Image element by converting this BitmapDatas canvas into a dataURL.

The image is then stored in the image Cache using the key given.

Finally a PIXI.Texture is created based on the image and returned.

You can apply the texture to a sprite or any other supporting object by using either the key or the texture. First call generateTexture:

var texture = bitmapdata.generateTexture('ball');

Then you can either apply the texture to a sprite:

game.add.sprite(0, 0, texture);

or by using the string based key:

game.add.sprite(0, 0, 'ball');

Most browsers now load the image data asynchronously, so you should use a callback:

bitmapdata.generateTexture('ball', function (texture) {
    game.add.sprite(0, 0, texture);
    // or
    game.add.sprite(0, 0, 'ball');
});

If this BitmapData is available during preload, you can use Phaser.Loader#imageFromBitmapData instead.

Parameters:

Name	Type	Argument	Description
key	string		The key which will be used to store the image in the Cache.
callback	function	<optional>	A function to execute once the texture is generated. It will be passed the newly generated texture.
callbackContext	any	<optional>	The context in which to invoke the callback.

Source:

src/gameobjects/BitmapData.js line 548

Returns:

The newly generated texture, or null if a callback was passed and the texture isn't available yet.

Type

PIXI.Texture | null

getBase64( [type] [, encoderOptions])

Returns a data URI representing the bitmap image.

Parameters:

Name	Type	Argument	Description
type	string	<optional>	Image format.
encoderOptions	number	<optional>	Image quality, for lossy formats.

Source:

src/gameobjects/BitmapData.js line 506

See:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Returns:

• The data URI.

Type

string

getBounds( [rect])

Scans the BitmapData and calculates the bounds. This is a rectangle that defines the extent of all non-transparent pixels. The rectangle returned will extend from the top-left of the image to the bottom-right, excluding transparent pixels.

Parameters:

Name	Type	Argument	Description
rect	Phaser.Rectangle	<optional>	If provided this Rectangle object will be populated with the bounds, otherwise a new object will be created.

Source:

src/gameobjects/BitmapData.js line 1205

Returns:

A Rectangle whose dimensions encompass the full extent of non-transparent pixels in this BitmapData.

Type

Phaser.Rectangle

getFirstPixel( [direction])

Scans the BitmapData, pixel by pixel, until it encounters a pixel that isn't transparent (i.e. has an alpha value > 0). It then stops scanning and returns an object containing the color of the pixel in r, g and b properties and the location in the x and y properties.

The direction parameter controls from which direction it should start the scan:

0 = top to bottom 1 = bottom to top 2 = left to right 3 = right to left

Parameters:

Name	Type	Argument	Default	Description
direction	number	<optional>	0	The direction in which to scan for the first pixel. 0 = top to bottom, 1 = bottom to top, 2 = left to right and 3 = right to left.

Source:

src/gameobjects/BitmapData.js line 1123

Returns:

Returns an object containing the color of the pixel in the r, g and b properties and the location in the x and y properties.

Type

object

getImage( [type] [, encoderOptions] [, onLoadCallback] [, onErrorCallback])

Returns an HTML image of the bitmap.

The image is loaded asynchronously, not right away. Use the callbacks if you need to wait for the loaded image.

Parameters:

Name	Type	Argument	Description
type	string	<optional>	Image format.
encoderOptions	number	<optional>	Image quality, for lossy formats.
onLoadCallback	function	<optional>	A function to call when the image loads.
onErrorCallback	function	<optional>	A function to call when the image fails to load.

Source:

src/gameobjects/BitmapData.js line 521

See:

• Phaser.BitmapData#getBase64

Returns:

• The image.

Type

HTMLImageElement

getPixel(x, y [, out])

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	integer		The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
y	integer		The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
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:

src/gameobjects/BitmapData.js line 1044

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)

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	integer	The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
y	integer	The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.

Source:

src/gameobjects/BitmapData.js line 1074

Returns:

A native color value integer (format: 0xAARRGGBB)

Type

number

getPixelRGB(x, y [, out] [, hsl] [, hsv])

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	integer			The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
y	integer			The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
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:

src/gameobjects/BitmapData.js line 1093

Returns:

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

Type

object

getPixels(rect)

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:

src/gameobjects/BitmapData.js line 1111

Returns:

Returns a ImageData object containing a Uint8ClampedArray data property.

Type

ImageData

line(x1, y1, x2, y2 [, color] [, width])

Draws a line between the coordinates given in the color and thickness specified.

Parameters:

Name	Type	Argument	Default	Description
x1	number			The x coordinate to start the line from.
y1	number			The y coordinate to start the line from.
x2	number			The x coordinate to draw the line to.
y2	number			The y coordinate to draw the line to.
color	string	<optional>	'#fff'	The stroke color that the line will be drawn in.
width	number	<optional>	1	The line thickness.

Source:

src/gameobjects/BitmapData.js line 1957

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

load(source)

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 | Image | 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:

src/gameobjects/BitmapData.js line 415

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

move(x, y [, wrap])

Shifts the contents of this BitmapData by the distances given.

The image will wrap-around the edges on all sides if the wrap argument is true (the default).

Parameters:

Name	Type	Argument	Default	Description
x	integer			The amount of pixels to horizontally shift the canvas by. Use a negative value to shift to the left, positive to the right.
y	integer			The amount of pixels to vertically shift the canvas by. Use a negative value to shift up, positive to shift down.
wrap	boolean	<optional>	true	Wrap the content of the BitmapData.

Source:

src/gameobjects/BitmapData.js line 237

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

moveH(distance [, wrap])

Shifts the contents of this BitmapData horizontally.

The image will wrap-around the sides if the wrap argument is true (the default).

Parameters:

Name	Type	Argument	Default	Description
distance	integer			The amount of pixels to horizontally shift the canvas by. Use a negative value to shift to the left, positive to the right.
wrap	boolean	<optional>	true	Wrap the content of the BitmapData.

Source:

src/gameobjects/BitmapData.js line 263

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

moveV(distance [, wrap])

Shifts the contents of this BitmapData vertically.

The image will wrap-around the sides if the wrap argument is true (the default).

Parameters:

Name	Type	Argument	Default	Description
distance	integer			The amount of pixels to vertically shift the canvas by. Use a negative value to shift up, positive to shift down.
wrap	boolean	<optional>	true	Wrap the content of the BitmapData.

Source:

src/gameobjects/BitmapData.js line 325

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

polygon(points [, fillStyle] [, lineWidth] [, strokeStyle])

Draws a polygon.

Parameters:

Name	Type	Argument	Default	Description
points	Array.<object>			An array of Phaser.Point or point-like objects.
fillStyle	CanvasGradient | CanvasPattern | string	<optional>		A color, gradient, or pattern.
lineWidth	number	<optional>	0	The line thickness.
strokeStyle	CanvasGradient | CanvasPattern | string	<optional>	'#fff'	The line color, gradient, or pattern (when lineWidth > 0).

Source:

src/gameobjects/BitmapData.js line 1990

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

processPixel(callback, callbackContext [, x] [, y] [, width] [, height])

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:

src/gameobjects/BitmapData.js line 765

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

processPixelRGB(callback, callbackContext [, x] [, y] [, width] [, height])

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:

src/gameobjects/BitmapData.js line 708

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

rect(x, y, width, height [, fillStyle])

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:

src/gameobjects/BitmapData.js line 1865

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

render()

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:

src/gameobjects/BitmapData.js line 2087

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

replaceRGB(r1, g1, b1, a1, r2, g2, b2, a2 [, region])

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:

src/gameobjects/BitmapData.js line 818

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

resize(width, height)

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

Parameters:

Name	Type	Description
width	integer	The new width of the BitmapData.
height	integer	The new height of the BitmapData.

Source:

src/gameobjects/BitmapData.js line 622

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

setHSL( [h] [, s] [, l] [, region])

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:

src/gameobjects/BitmapData.js line 867

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

setPixel(x, y, red, green, blue [, immediate])

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

Parameters:

Name	Type	Argument	Default	Description
x	integer			The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
y	integer			The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
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).
immediate	boolean	<optional>	true	If true the context.putImageData will be called and the dirty flag set.

Source:

src/gameobjects/BitmapData.js line 1027

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

setPixel32(x, y, red, green, blue, alpha [, immediate])

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

Parameters:

Name	Type	Argument	Default	Description
x	integer			The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
y	integer			The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData and be an integer, not a float.
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:

src/gameobjects/BitmapData.js line 989

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

shadow(color [, blur] [, x] [, y])

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:

src/gameobjects/BitmapData.js line 1749

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

shiftHSL( [h] [, s] [, l] [, region])

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. Within [-1, 1].
s	number	<optional>	null	The amount to shift the saturation by. Within [-1, 1].
l	number	<optional>	null	The amount to shift the lightness by. Within [-1, 1].
region	Phaser.Rectangle	<optional>		The area to perform the operation on. If not given it will run over the whole BitmapData.

Source:

src/gameobjects/BitmapData.js line 927

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

text(text, x, y [, font] [, color] [, shadow])

Draws text to the BitmapData in the given font and color. The default font is 14px Courier, so useful for quickly drawing debug text. If you need to do a lot of font work to this BitmapData we'd recommend implementing your own text draw method.

Parameters:

Name	Type	Argument	Default	Description
text	string			The text to write to the BitmapData.
x	number			The x coordinate of the top-left of the text string.
y	number			The y coordinate of the top-left of the text string.
font	string	<optional>	'14px Courier'	The font. This is passed directly to Context.font, so anything that can support, this can.
color	string	<optional>	'rgb(255,255,255)'	The color the text will be drawn in.
shadow	boolean	<optional>	true	Draw a single pixel black shadow below the text (offset by text.x/y + 1)

Source:

src/gameobjects/BitmapData.js line 1888

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

textureLine(line, image [, repeat])

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 | Image			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:

src/gameobjects/BitmapData.js line 2038

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData

update( [x] [, y] [, width] [, height])

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.

Warning: This is a very expensive operation, so use it sparingly.

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>	1	The width of the image data area.
height	number	<optional>	1	The height of the image data area.

Source:

src/gameobjects/BitmapData.js line 665

Returns:

This BitmapData object for method chaining.

Type

Phaser.BitmapData