Base

This is the base for every display object. All display objects inherit from this, which means they will have all the methods and properties specified here.

Methods

Properties

abs_x : Number
The x position of the object, relative to the left edge of the canvas.
abs_y : Number
The y position of the object, relative to the top edge of the canvas.
added : Boolean (since version 2.1.0)
True if the object is added as a child to another object or the core instance. This does not mean it is being drawn.
cap : String
Describes how the end points of a line is drawn. Can be one of the values "butt", "round" or "square". Default: "butt"
children : Array
Contains all the children that has been added to this display object.
clipChildren : Boolean (since version 2.8.0)
Set to true if parts from child objects that are overflowing outside this object's area should be hidden. Only available for arc, ellipse, image, polygon, rectangle and sprite. Default: false
composition : String
Sets the composition operation. See the canvas specification for more info.
drawn : Boolean
True if the object is currently drawn to the canvas, false otherwise.
events : Object
Contains all the event handlers that have been added to this display object. The events object has properties for each event type that a handler has been added for. That property is an object containing all the handlers.
fill : String
The fill of the object. This string has a special syntax which accepts a few different kinds of values; color, gradient or image pattern. The color can be any valid CSS color. The gradient uses CSS gradient syntax (except for some alterations for radial gradients). The image pattern uses a special syntax. All is describes below:
Color
Any valid CSS color. For example #000, rgba(0, 0, 0, 0.5) or transparent. See the CSS specification for more info.
Gradient

Uses CSS syntax. See the CSS specification for more info. There are some alterations for radial gradients. Syntax looks like this:
radial-gradient(start_position, end_position, size, color, color [, color...])
All arguments have default values, so the shortest syntax possible is radial-gradient(color, color). The positions are defined as background-positions and have "center" as default value. The first position is for the start circle, and the second position is for the end circle. The size sets the radius of the end circle and is defined as either one of the keywords listed in the specification, a percentage or a pixel value. Defaults to cover. The percentage value is used like this:
radial-gradient(center, center, 50% width, #fff, #000)
That means the radius of the end circle will be 50 percent of the object's width (or height if height was specified). For radial objects, you still use width/height in this syntax, but it refers to twice the radius, so 50% width would be the same as the radius. If you want to use a pixel value instead, just write it like 20px. The color values can be any CSS color value.

The linear gradients work like the CSS version does. The syntax looks like this:
linear-gradient(start_position | angle, color, color [, color...])
The start position is one of the values top, bottom, left or right, and can be combined as one vertical value and one horizontal value to set the start to a corner. The angle is specified like 45deg.

Image pattern
Uses a special syntax:
image(path [, repeat])
The path is simply the path to the image file. The repeat option can be one of repeat, repeat-x, repeat-y or no-repeat. Defaults to repeat if not specified. Because of lacking browser support though, only repeat works at the moment. So usually you would just use image(img.jpg).
id : Number
The object ID given from the draw module. core.draw.objects[id] corresponds to this object when it is in the draw list.
join : String
Describes how line connections in strokes are drawn. Can be one of the values "round", "bevel" or "miter". Default: "miter"
miterLimit : Number
When drawing a stroke with join set to "miter", the outer edge of the stroke will be extended until the lines meet each other. This property determines how far from the inner connection point the outer connection point can be placed. If it exceeds this value, "bevel" will be used as join for that connection point instead.
opacity : Number
The opacity value that the object will be drawn with. Number between 0 and 1.
origin : Object
Contains two properties that describes where the origin is inside of the object. This point acts as a center point for rotation. It it also the coordinates where the x and y properties are drawn to. If origin.x is 10, the object's left edge will be drawn 10 px to the left of the x property. Values for the origin can be either a number (negative or positive, both work) or one of the predefined keywords listed below. Setting this property will change how the object is drawn. Changing the origin can also be done with the method setOrigin().
x
"left" | "center" | "right" | Number
y
"top" | "center" | "bottom" | Number
parent : displayObject
The parent object for this object. If the object is added to the core instance, then the core instance will be the parent. Before version 2.1.0 the parent property was only set if the object was added to another object, and not to the core instance.
pointerEvents : Boolean (since version 2.0.0)
When set to false, all pointer events will be ignored for this object, and will be passed on to the next object underneath.
rotation : Number
The rotation of the object in degrees. It has no limits, 540 gives the same result as 180 which gives the same result as -180. Giving it a larger value rotates it clockwise, and a smaller value rotates anticlockwise.
scalingX : Number
Describes what horizontal scaling the object will be drawn with. The value 1 means normal scale, more scales up and less scales down. The value can not be 0. You can also set the scaling using the methods scale() or scaleTo().
Note: oCanvas does not currently handle events correctly on objects that have been scaled.
scalingY : Number
Describes what vertical scaling the object will be drawn with. The value 1 means normal scale, more scales up and less scales down. The value can not be 0. You can also set the scaling using the methods scale() or scaleTo().
Note: oCanvas does not currently handle events correctly on objects that have been scaled.
shadow : String
Uses almost the same syntax as the CSS box-shadow property:
<offset_x>px <offset_y>px <blur_radius>px color
The color can be any valid CSS color. The unit px is not needed, it is used only for clarification. Whatever unit you write, the number will be interpreted as pixels. Example: 0 0 10px #000.
shadowBlur : Number
The blur radius of the shadow.
shadowColor : String
Any valid CSS color.
shadowOffsetX : Number
The x offset of the shadow.
shadowOffsetY : Number
The y offset of the shadow.
shapeType : String
Describes what kind of shape it is. Can be either "rectangular" or "radial".
stroke : String
The stroke for the object. Syntax is "<number>px value", where the number is the stroke width and the value is one of the supported fill values listed under the fill property.
strokeColor : String
The stroke color for the object. Can be any of the supported values for the fill property.
strokeWidth : Number
The width of the stroke.
type : String
The name of the shape. For example, a rectangle object has type set to "rectangle".
x : Number
The x position of the object, relative to its parent.
y : Number
The y position of the object, relative to its parent.
zIndex : Number or String (since version 2.0.0)
The layer order among all added objects in the parent. Higher number is closer to the front. There are also two special keywords, "front" and "back", which you can use to put it in the front or back.
Note: This is a real index that is in relation to the other objects with the same parent. Setting zIndex to a specific number does not guarantee that it keeps that index forever. When other objects with the same parent change zIndex, the zIndex for this object might change too. The zIndex must be set after the object has been added to a parent.
Before version 2.1.0 this value was the ordering of all objects on canvas, which made layering incorrect.