Rectangle

A rectangle is a very common display object, and can be used for a lot of things. Creating one is also very simple. The rectangle also offers a specific stroke property for choosing where the stroke is placed, inside, right on the edge or outside.

Properties

borderBottomLeftRadius : Number (since version 2.10.0): Border radius for bottom left corner. Default: 0
borderBottomRightRadius : Number (since version 2.10.0): Border radius for bottom right corner. Default: 0
borderRadius : Number (since version 2.10.0): Border radius for all four corners. Default: 0
borderTopLeftRadius : Number (since version 2.10.0): Border radius for top left corner. Default: 0
borderTopRightRadius : Number (since version 2.10.0): Border radius for top right corner. Default: 0
height : Number: The height of the object.
strokePosition : String: Defines how the stroke will be drawn. Can be on of the values inside, center and outside. Default: center. This property is currently only affecting rectangles, but might be available for other objects in future releases.
width : Number: The width of the object.

Examples

Example 1

We start by creating a new core instance. Then we create a rectangle by specifying the width and the height.

View Example

Code

var canvas = oCanvas.create({
	canvas: "#canvas"
});

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 77,
	width: 200,
	height: 100,
	fill: "#0aa"
});

canvas.addChild(rectangle);

Output

Example 2

We start by creating a new core instance. Then we create a rectangle by specifying the width and the height. We create both a fill and a stroke, and we choose to put the stroke outside the rectangle. This is the shorthand syntax for that, setting strokePosition: "outside" would work just as fine.

View Example

Code

var canvas = oCanvas.create({
	canvas: "#canvas"
});

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 87,
	width: 200,
	height: 100,
	fill: "#0aa",
	stroke: "outside 20px rgba(0, 0, 0, 0.5)"
});

canvas.addChild(rectangle);

Output