Text to Bezier curve path

how to apply text to a curved path

by Rajasekar Elango

HTML

<table>
  <TR>
    <TH>Bezier Curve</TH>
    <TD>
      <input size="80" type="text" id="curve" name="curve" value="99.2,177.2,130.02,60.0,300.5,276.2,300.7,176.2" disabled=true>
    </TD>
  </TR>
  <TR>
    <TH>Text</TH>
    <TD>
      <input size="80" type="text" id="text" name="text" value="Text to path in HTML5!">
    </TD>
  </TR>
  <TR>
    <TD colspan=2>Click the control points to change the curve</TD>
  </TR>
  <TR>
    <TD colspan=2>Edit the text on the fly!</TD>
  </TR>
  <TR>
    <TD colspan=2>
      <div id="canvasDiv"></div>
    </TD>
  </TR>
</table>
<TR>
  <TD>
    <div id="point" />

JavaScript

//updated 20160824
//added the ability to edit the Bezier curve using mouse click/drag

//#using jQuery.min.js  //auto included by jsFiddle
//bezier curve editor gVars
var first = true;
var gState;
var Mode = {
  kAdding: {
    value: 0,
    name: "Adding"
  },
  kSelecting: {
    value: 1,
    name: "Selecting"
  },
  kDragging: {
    value: 2,
    name: "Dragging"
  },
  kRemoving: {
    value: 3,
    name: "Removing"
  },
};
var gBezierPath;
var WIDTH;
var HEIGHT;
//bezier curve editor gVars

var ctx;
var canvas;

//window.onload = function () { 
//commented for jsFiddle
startIt();
//}

function startIt() {
  canvasDiv = document.getElementById('canvasDiv');
  canvasDiv.innerHTML = '<canvas id="layer0" width="500" height="500"></canvas>'; //for IE
  canvas = document.getElementById('layer0');
  WIDTH = canvas.width;
  HEIGHT = canvas.height;
  canvas.addEventListener("mousedown", handleDown, false);
  canvas.addEventListener("mouseup", handleUp, false);
  ctx = canvas.getContext('2d');
  ctx.fillStyle = "black";
  ctx.font = "18px arial black";
  curve = document.getElementById('curve');
  curveText = document.getElementById('text');
  $(curveText).keyup(function(e) {
    render();
  });

  //this code sets up the initial curve definition
  gState = Mode.kAdding
  gBezierPath = new BezierPath(new Point(41, 243));
  render();
  gBezierPath.addPoint(new Point(280, 66));
  render();
  gBezierPath.selectPoint(new Point(29, 254));
  gBezierPath.updateSelected(new Point(15, 33));
  render();

  gBezierPath.selectPoint(new Point(294, 58));
  gBezierPath.updateSelected(new Point(270, 273));
  render();
  gState = Mode.kSelecting;
  //this code sets up the initial curve definition
}

function drawStack() {
  Ribbon = gBezierPath.toRibbon(); //get the curve definition to pass to the text2path
  if (Ribbon != null)
    FillRibbon(curveText.value, Ribbon);
}

function FillRibbon(text, Ribbon) {

  var textCurve = [];
  var ribbon = text.substring(0, Ribbon.maxChar);
  var...