Curved Text Using SVG1

text is given same path as the polyline traced by the user

by siddjain

HTML

<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.draggable.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.clock.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.import.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.filter.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.export.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.easing.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.shapes.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.topath.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.parser.js"></script>
<h1>Instructions</h1>
<ol>
    <li>Enter some text</li>
    <li>Trace a path in the canvas (mouse down to begin path, mouse up to end path)</li>
</ol>
<div id="drawing" style="border:1px solid black; width:300px; height:300px"></div>
<br/>
<input id="input" type="text" size="45" placeholder="enter some text"></input>
<br/>
<button id="animateButton">Begin Animation</button>
<label>FPS: </label>
<span id="fps"></span>
<div id="output"></div>

JavaScript

/* create an svg drawing */
var draw = SVG('drawing')
var path = null;
var polyline = null;
var text = 'Hello World!';
draw.on('mousedown', mousedown);
var button = document.getElementById('animateButton');
var animationId = null;
var intervalId = null;
var fps = 0;
var animate = true;
var animationStep = 5.0;
var rotation = 0;
button.addEventListener('click', animateHandler, false);

function mousedown(e)
{    
    rotation = 0;
    draw.clear();
    stopAnimation();
    var p = getCursorPosition(e);
    path = [];
    path.push([p.x, p.y]);
    draw.on('mousemove', mousemove);
    draw.on('mouseup', mouseup);    
}

function mousemove(e)
{
    var p = getCursorPosition(e);
    path.push([p.x, p.y]);    
    update();
}

function mouseup(e)
{
    draw.off('mousemove', mousemove);
    draw.off('mouseup', mouseup);
    drawText();
}

function updateFps(time)
{
    document.getElementById('fps').innerHTML = fps;
    fps = 0;
}

function animateFrame(time)
{
    rotation += animationStep;
    draw.each(function(i, children) {
        children[i].rotate(rotation, 150, 150);
    });
    fps++;
    animationId = requestAnimFrame(animateFrame);
}

function animateHandler()
{    
    if (animate)
    {
        animate = false;
        button.innerHTML = 'Stop Animation';                   
        animationId = requestAnimationFrame(animateFrame);        
        intervalId = setInterval(updateFps, 1000);
    }
    else
    {
        animate = true;
        stopAnimation();
    }
}

function stopAnimation()
{
    if (animationId)
    {        
        window.cancelAnimationFrame(animationId);
        animationId = null;            
    }    
    if (intervalId)
    {
        clearInterval(intervalId);
        intervalId = 0;
        fps = 0;
    }   
   
    button.innerHTML = 'Begin Animation';
}

function update()
{    
    polyline && polyline.remove();    
    polyline = draw.polyline(path).fill('none').stroke({width:1});
}

function drawText()
{    
    
        var...