siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Ellipse

Your browser does not support HTML5 Canvas
Notes:

An ellipse is an oval. We used the mathematical definition of an ellipse, iterated over small increments, to create the shape. If increments are larger, the image evolves to a angular-type shape.

Features and Usage:

Primary Attributes:

7 parameters:
center(TNTPoint), width(double), height(double), fillColor(TNTColor), borderColor(TNTStroke), numberOfSteps(integer), rotationInDegrees(double)

The more the number of steps(increments), the smoother the ellipse

To Create: (Examples above)

var center = origin;
var ptC = new TNTPoint(-5, 12);

blueStroke.setStrokeLineWidth(1); //this is another way of changing the stroke thickness;
//blueStroke.lineWidth = 1; //easier way to set the stroke thickness
var myEllipse = new TNTEllipse(center, 18, 12, green, blueStroke, 200, 30);

var lemon = new TNTEllipse(ptC, 8, 4, yellow, null, 5, 0);
lemon.showPoints = true;
lemon.showCenter = true;

To Draw:

myEllipse.drawTNTEllipse(context);
lemon.drawTNTEllipse(context);
Comments:

Make the width = height to get a circle