siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Gradient

Your browser does not support HTML5 Canvas

Notes:

A gradient is a smooth transition from one color to another in a particular number of steps.

Features and Usage:

Primary Attributes:

3 Parameters:
startingLineColor(TNTLine), numSteps(integer), endingStroke(TNTStroke)

You may need to 'fiddle' with the number of steps to get the desired thickness.

To Create:
(Example above)

//designer color:
var tangerine = new TNTColor(250, 50, 5, "tangerine");
//designer strokes (needed the color first)
//default strokes are .2 in thickness
var tangerineStroke = new TNTStroke(tangerine, .5);
var ptA = new TNTPoint(-15, 3);
var ptB = new TNTPoint(9, -10);
var lineAB = new TNTLine(ptA, ptB, tangerineStroke);
var myGradient = new TNTGradient(lineAB, 25, blackStroke);

To Draw:

myGradient.drawTNTGradient(context);

Comments:

We showed how to create our custom tangerine color. Visit Booker's Color Picker saga to get the rgb values for any colors you'd like to create!