spiralIcon

JSGS Shapes

TNTRectangle

Your browser does not support HTML5 Canvas
Notes:

Similar to a TNTSquare, just longer! Two are shown above, demonstrating how strokes can be applied (or not) and whether the corner points are shown (or not).

(Actually, this shape was created first, and then TNTSquare was developed.)

Note: the gray rectangle above was made with a legacy engine that did not allow for rotations, TNTRectangle0. It is showCenter for completeness. You should only use the upgraded TNTRectangle which has a rotation feature.

TNTRectangle Features and Usage:
Primary Attributes:

6 Parameters:

  • center: TNTPoints
  • width: a decimal (known as a 'double' in code) for the horizontal dimension
  • height: a decimal for the vertical dimension
  • fillColor: TNTColor, as fcolr
  • borderStroke: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the square about its center. rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The example above was created by:

var theCenter = new TNTPoint(-5, 5);
var width = 15;
var height = 3;

var myRectangle = new TNTRectangle(theCenter, width, height, white, blackStroke, 10);
myRectangle.showCenter = true;
myRectangle.accentColor = red;
myRectangle.showPoints = true;
myRectangle.drawTNTRectangle(context);

var rectangle2 = new TNTRectangle0(new TNTPoint(5, -5), 3.5, 7.75, lightGray, null);
rectangle2.drawTNTRectangle0(context);
To Draw: 
myRectangle.drawTNTRectangle(context);
Comments:

An older version of TNTRectangle, TNTRectangle0 was retained for 'backwards compatibility' and did not feature the ability to 'rotate' the rectangle.
Even More:

See how we were able to change the colors of the vertices? It's by using the 'accentColor' property of TNTRectangles.