Disclosure

Loading

For the inicialization of the script some extra scripts need to be downloaded.

<script type="text/javascript" src="PATH_TO/jquery.min.js"> </script> 
                        <script type="text/javascript" src="PATH_TO/opentype_modified.min.js"> </script> 
                        <script type="text/javascript" src="PATH_TO/AdapType.min.js"> </script>
                    

Setting Up

Call a canvas where the script will draw de text

 <canvas id="canvas_id"> </canvas>
                    

Initialize script

var font= new AdapType({ 
                        fonts:[{"font1":"PATH_FONT_REGULAR", "font2":"PATH_FONT_EXPANDED"}], 
                        textToRender: "PLACE_TEXT_HERE", 
                        canvasID : "CANVAS_ID" 
                        )};
                    

Run Script

font.runAdapType();
                    

Make it resonponsive. This pice of code, enables the canvas, and its letters, to be resized, in width, automatically when the window size is changed.

 $( window ).resize(function() { 
                        font.changeCanvasWidthSetup();
                        font.windowResized();
                    });
                

Options

Option	Default	Type	Description
fontSize	100	number	Defines size of font to draw.
mode	equal	string	Defines what mode each letter will be stretched: random, equal, firstLetter, lastLetter, chosenLetter, deform.
chosenLetters	null	array	Defines witch letter will be stretched, in mode chosenLetter.
canvasID	null	string	Link to canvas to draw.
canvasWidth	100	number	Indicates percentage of window to canvas use.
canvasWidthMode	percentage	string	Indicates the type of measure of canvas width, percentage, pixels.
color	black	string	Color to fill font.
stroke	transparent	number	Indicates the stroke color.
strokeWidth	0	number	Indicates the stroke width.
animateonEnter	false	boolean	Animate font stretch, when window is loaded.
start	max	string	string Where the stretch will start, with its max value or min.
exponential	true	boolean	Describes the type of calculus for y coordinates. For more information go to PROCESS.
lineHeight	1.2	boolean	Describes the line spacing is the vertical distance between lines of text.

All this options can be changed with the help of the change Methods, or while initializing the script, in the followwing way:

var font_1= new AdapType({ 
                    fonts:[{"font1":'Path1', "font2":'Path2'}],
                    fontSize:140,
                    textToRender: "OPT",
                    canvasID : "doc38",
                    canvasWidth:30,
                    mode: "chosenLetter",
                    color:"#db3535",
                    chosenLetters: [1,3],

                });
            

 var font_2 = new AdapType({
                fonts:[{"font1":'Path1', "font2":'Path2'}],
                fontSize:140,
                textToRender: "ION",
                canvasID : "doc39",
                canvasWidth:30,
                mode: "random",
                color:"transparent",
                stroke : "#db3535",
                strokeWidth:2

            });
        

Get Methods

Getting font size of a Adaptype Object.

AdapType.getFontSize();
            //returns the number 200

            AdapType.getColor()
            //returns the string #db3535

            AdapType.getMode()
            //returns the string "random".

            AdapType.getText()
            //returns the string "HI".

            AdapType.getStart()
            //returns the string "max".

            AdapType.getExponential() NEW
            //returns the boolean as true.

            AdapType.getCanvasWidthMode() 
            //returns the string "percentage".

            AdapType.getCanvasWidth() NEW
            //returns the number 35.

            AdapType.getCanvasID() NEW
            //returns the string doc37.

            AdapType.getMinWidthPx() NEW
            //returns the number 206 (pixels).

            AdapType.getMinWidthPer() NEW
            //returns the number 17.85095320623917 (percentage).

        

Adaptype can take a while to be completely loaded.
When running functions (like AdapType.changeText()) on events like on window loaded (not click events), since JavaScript is asynchronous it will run any function, even if all the information is not ready (usually return error: this.font1.checkWords is not a function ).
So the next function is recomended for this kind of situations, and it may be implemented with the following code:

 if(AdapType.getLoaded==1){
            AdapType.changeText("new text");
        }
    

Change Methods

Change canvas width to the width specified, when the text doesn't fit the canvas, will automatically decrease its font size. (This will not upadate the canvas, if you want it, use AdapType.changeCanvasWidthDraw());

AdapType.changeCanvasWidth(width)
        

Change canvas width to the width specified,, recalculate widths to each letters and show it in the canvas.

AdapType.changeCanvasWidthDraw(width)
        

Change the text of the text and shows it in the canvas.

AdapType.changeText(string)
        

Change font size and draw on canvas.

AdapType.changeFontSizeDraw(size)
        

Change the color of the text and shows it in the canvas.

AdapType.changeColor(width)
        

Change the mode option, and draws it in the canvas.

AdapType.changeMode(mode)
        

Change letters selected for the mode chosenLetter, recalculate widths to each letters and show it on the canvas.

AdapType.changeLettersSelect(array)
        

Change Exponential option and draws it in the canvas.

AdapType.changeExponential(boolean) NEW
        

Other Functions

— Inicializing

AdapType.runAdapType() 
        

— Window Resized

This function should be called "onWindowRsized". It recalculates widths to each letters, according to new size of window and show it on the canvas.

AdapType.windowResized() 
         

— Re-Random

Makes a new random for letters, changing its widths. If mode isn't random will change it.

AdapType.reRandom() 
         

— Animating

Animates current width to new width. When decreasing width prevents from going beyond min width of the font, established by Font 1.

AdapType.animateFromTo(VEL,TO, ANIMATING_MODE); UPDATED
            //VEL – velocity of animation
            //TO – width to animate (ex: 100);
            //ANIMATING_MODE – mode of animation (“easeIn”, “easeOut”, “easeInOut” and “linear”)
        

— Draw

Draws in canvas, given widths for each letter. Does not change itself nothing to the canvas and the letters.

AdapType.interpolate()