Register a new display object module.

Syntax registerDisplayObject(name, constructor [, init])

Return Type undefined


Register a new display object module. This is a method used by the display modules that oCanvas concists of. Objects registered by this method will be instantiated for each new core instance that is created. If you want to register a custom display object only for a specific core instance, use the register() method of the display module instead.


name : String
The name of the display object. Creating a new instance of this object will be done through core.display.thisname().
constructor : Function
A function that accepts two arguments (user settings and the core instance). It should also return an object that has been extended with the user specified settings. This object needs to have a method called draw(). It should also have the property shapeType, which is a string and has to be either rectangular or radial.
init : String
Name of a method on the object that the constructor returns. This method will be called each time a new instance of the display object is created. Optional.

Return Value

undefined. Doesn't return anything.


Example 1

We start by defining the constructor function. That function will immediately return the object we specify. That object is an object thas has been extended with the settings variable which contains the user-defined settings specified when the display object is instantiated. The object needs the core property so that the draw() method can access the canvas context. Then we define the shapeType so that other functionality in oCanvas can work in the intended way. The init() method is empty in this example, but it is there just to show how it is defined.

Next comes the draw() method which is the most important function since that is where the actual drawing happens. We start that function with setting some variables. this.core.canvas is the canvas context where we can use the native canvas API to draw. The origin is the position inside of the object that is the registration point. This is where the x and y positions of the object are set to be and also the center point of rotation. beginPath() and closePath() are used to not interfere with other display objects. Then we specify what should be drawn, using checks for the fill and stroke to see what we should draw.

After the whole constructor block we run the method registerDisplayObject() and pass the constructor variable into that method. The display object is now registered and will be instantiated for each new core instance. Next, we create a new core instance and an instance of our new display object which we add to the canvas.

View Example
var constructor = function (settings, core) {
	return oCanvas.extend({
		core: core,
		shapeType: "rectangular",

		init: function () {
		draw: function () {
			var canvas = this.core.canvas,
				origin = this.getOrigin(),
				x = this.abs_x - origin.x,
				y = this.abs_y - origin.y,
				width = this.width,
				height = this.height;
			if (this.fill !== "") {
				canvas.fillStyle = this.fill;
				canvas.fillRect(x, y, width, height);
			if (this.strokeWidth > 0) {
				canvas.strokeStyle = this.strokeColor;
				canvas.lineWidth = this.strokeWidth;
				canvas.strokeRect(x, y, width, height);
	}, settings);

oCanvas.registerDisplayObject("myObject", constructor, "init");

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

var myObj = canvas.display.myObject({
	x: 77,
	y: 150,
	width: 200,
	height: 300,
	fill: "#000",
	stroke: "10px #fff"