Rectangles

A rectangle in jCanvas is, essentially, a rectangle of any width or height.

Basic Usage

You can draw a rectangle using the drawRect() method. The size of a rectangle is determined by its width and height properties.

$('canvas').drawRect({
fillStyle: '#000',
x: 150, y: 100,
width: 200, height: 100
});

Positioning

The fromCenter property (used above) determines if a rectangle’s x and y properties lie at its center (as opposed to its top-left corner). This property is true by default.

For example, consider the following rectangles. They both have the same x and y property values, but only one has its fromCenter property set to false.

$('canvas').drawRect({
fillStyle: '#c33',
x: 100, y: 60,
width: 100, height: 80
});
$('canvas').drawRect({
fillStyle: '#6a6',
x: 100, y: 60,
width: 100, height: 80,
fromCenter: false
});

If you want to make fromCenter false by default for all shapes, do so using the $.jCanvas.defaults object.

$.jCanvas.defaults.fromCenter =false;
$('canvas').drawRect({
fillStyle: '#6a6',
x: 100, y: 60,
width: 100, height: 80,
fromCenter: false
});

Rounded Corners

You may round the corners of a rectangle using the cornerRadius property.

$('canvas').drawRect({
fillStyle: '#36c',
x: 150, y: 100,
width: 200, height: 100,
cornerRadius: 10
});

$('canvas').drawRect({
strokeStyle: '#c33',
strokeWidth: 4,
x: 150, y: 100,
width: 200, height: 100,
cornerRadius: 10
});