Warp text

HTML

<canvas id=demo width=400 height=300></canvas>

<br>
<span>Start Height:</span>
<input id="iHs" type="range" min=0 max=200 value=10>
<span id="vHs">10</span>

<br>
<span>Middle Height:</span>
<input id="iHm" type="range" min=0 max=200 value=167>
<span id="vHm">167</span>

<br>
<span>End Height:</span>
<input id="iHf" type="range" min=0 max=200 value=30>
<span id="vHf">30</span>

<br>
<span>Middle point:</span>
<input id="iXm" type="range" min=0 max=100 value=50>
<span id="vXm">50</span>

<br>
<span>Offset Y:</span>
<input id="iYo" type="range" min=0 max=100 value=30>
<span id="vYo">30</span>

<br>
<span>Text height:</span>
<input id="iTh" type="range" min=10 max=100 value=60>
<span id="vTh">60</span>

<br>
<span>Text top gap:</span>
<input id="iTo" type="range" min=0 max=30 value=13>
<span id="vTo">13</span>

<br>
<span>Text:</span>
<input id="iText" type="text" value="TEXT ART">

CSS

span {
    display:inline-block;
    width:90px;
    text-align:right;
    font:12px sans-serif;
}

JavaScript

/// (c) Ken Fyrstenberg Nilsen, Abidas Software .com
/// License: CC-Attribute

var ctx = demo.getContext('2d'),
    font = '64px impact',
    w = demo.width,
    h = demo.height,
    os = document.createElement('canvas'),
    octx = os.getContext('2d');

os.width = w;
os.height = h;

octx.font = font;
octx.textBaseline = 'top';
octx.textAlign = 'center';

function renderArtText() 
{

		var hs = parseInt(iHs.value, 10);
    var hm = parseInt(iHm.value, 10);
    var hf = parseInt(iHf.value, 10);
    var xm = parseInt(iXm.value, 10);
    var yo = parseInt(iYo.value, 10);
    var th = parseInt(iTh.value, 10);
    var to = parseInt(iTo.value, 10);
    
    vHs.innerHTML = hs;
    vHm.innerHTML = hm;
    vHf.innerHTML = hf;
    vXm.innerHTML = xm;
    vYo.innerHTML = yo;
    vTh.innerHTML = th;
    vTo.innerHTML = to;
    
    octx.clearRect(0, 0, w, h);
    ctx.clearRect(0, 0, w, h);

    octx.fillText(iText.value.toUpperCase(), w * 0.5, 0);

    var ysl = (th + hs*th/100)/2;
    var yml = (th + hm*th/100)/2;
		var yfl = (th + hf*th/100)/2;
    
    var xs = 0;
    xm = xm*w/100;
		var xf = w;
		yo = yo*h/100;

		for (var x = 0; x < w; x++)
    {
    		var f;
        
    		if (x < xm)
          f = ysl + x*(yml-ysl)/(xm-xs);
        else
          f = yml + (x-xm)*(yfl-yml)/(xf-xm);
        
        ctx.drawImage
        (
        	os, 
          x, to, 1, th, 
          x, yo, 1, f
        );
    
    }
}

iHs.onchange = iHm.onchange  = iHf.onchange = 
iXm.onchange = iText.onkeyup = iYo.onchange = 
iTo.onchange = iTh.onchange  = renderArtText;

renderArtText();