siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Rounded Rectangle

Your browser does not support HTML5 Canvas
Notes:

Weird! Control points can be used to smooth out or even twist the edges of a rectangle to create things that don't even look like rectangles! Borders and/or fills are optional; the control points can be hidden or shown as desired. The green shape above shows the blue control points and center.

Features and Usage:

Primary Attributes:

7 Parameters:
center(TNTPoint), width(double), height(double), radius(double), fillColor(TNTColor), borderColor(TNTStroke), rotationDeg(double)

Note: accentColor can be changed as shown and center and/or vertices can be shown as well

To Create:
Green Example

var theCenter = new TNTPoint(-5, 5);
theCenter = theCenter.translate(12, -15);
var myRectangle2 = new TNTRoundedRectangle(theCenter, width, height, 2, medGreen, null, 0);
myRectangle2.showCenter = true;
myRectangle2.accentColor = blue;
myRectangle2.showPoints = true; myRectangle2.drawTNTRoundedRectangle(context);

To Draw:

myRectangle2.drawTNTRoundedRectangle(context);
Comments:

If you look at the tntGraphics source code for TNTRoundedRectangle, you will notice that it uses a special function, quadraticCurveTo to make the curved edges. Check it out!