addChildAt() (since version 2.9.0)

Add display object as a child to this object at the specified index.

Syntax addChildAt(object, index [, returnIndex])

Return Type displayObject or Number or Boolean


Add display object as a child to this object at the specified index. This means the child's x and y properties are now relative to the position of this display object. When this object is rotated, moved or removed, the children are also affected.


object : displayObject (since version 2.9.0)
An object that inherits from the base displayObject. This could be either a predefined display object, or a user-defined created with the register() method.
index : Number (since version 2.9.0)
The index for where in the children list to add the object. If the index is less than or equal to 0 it will be added to the beginning of the list. If the index is more than the index of the last item it will be added to the end of the list.
returnIndex : Boolean (since version 2.9.0)
If set to true, the method will return the index of the child. See the return value below.

Return Value

displayObject or Number or Boolean. Returns the display object itself if the second argument is not specified or if it's false. If the second argument is specified, and is true, it returns the index of the child within the children array on the display object (this could differ from the input index if the input index is out of range). Returns false if the passed in object already has a parent.


Example 1

We create a rectangle and two squares. Then we add the rectangle to the canvas and the two squares as children to the rectangle, but the red rectangle behind the blue one.

View Example
var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 270,
	width: 200,
	height: 100,
	fill: "#000"

var square1 = canvas.display.rectangle({
	x: 20,
	y: 15,
	width: 50,
	height: 50,
	fill: "blue"

var square2 = canvas.display.rectangle({
	x: 10,
	y: 10,
	width: 50,
	height: 50,
	fill: "red"


rectangle.addChildAt(square2, 0);