Responsiveness

Vara can be made responsive by changing the font size and positions with respect to the screen size. However this has to be done before the text is created, that is once the text is drawn it will stay like that irrespective of screen size.

You can create responsive in fluid manner or in a fixed break point manner.

For the fluid manner, first find a suitable font size (ideal font size) for the current screen size (ideal screen size). Before applying the font size find the ratio between current screen size and ideal screen size. Multiply this ratio with the ideal font size to get a fluid responsive font.

<div id="vara-container"></div>

var idealFontSize = 48, idealScreenSize = 1920,
fontSize = (screen.width / idealScreenSize) * idealFontSize;
var vara = new Vara("#vara-container","pacificoSL.json",[{
    text:"Hello World!!",
    fontSize:fontSize
}]);

This however, makes the font size too small on smaller screens. Therefore we will have to set a minimum and maximum value.

var idealFontSize = 48, idealScreenSize = 1920, maxFontSize = 64, minFontSize = 22,
fontSize = (screen.width / idealScreenSize) * idealFontSize;
fontSize = Math.max(minFontSize,Math.min(maxFontSize,fontSize));
var vara = new Vara("#vara-container","pacificoSL.json",[{
    text:"Hello World!!",
    fontSize:fontSize
}]);

The second method is to set a different font size for different screen widths, like in Bootstrap.

var fontSize = 64;
if(fontSize < 600) fontSize = 24;
else if(fontSize < 900) fontSize = 32;
else if(fontSize < 1200) fontSize = 40;
else if(fontSize < 2000) fontSize = 48;
var vara = new Vara("#vara-container","SatisfySL.json",[{
    text:"Hello World!!",
    fontSize:fontSize
}]);