Curved Canvas Text

by Arjan Haverkamp

HTML

<canvas id="c" width="800" height="600"></canvas>

JavaScript

function cropCanvas(canvas)
{
	var ctx = canvas.getContext('2d'),
		w = canvas.width,
		h = canvas.height,
		pix = {x:[], y:[]}, n,
		imageData = ctx.getImageData(0,0,w,h),
		fn = function(a,b) { return a-b };

	for (var y = 0; y < h; y++) {
		for (var x = 0; x < w; x++) {
			if (imageData.data[((y * w + x) * 4)+3] > 0) {
				pix.x.push(x);
				pix.y.push(y);
			}
		}
	}
	pix.x.sort(fn);
	pix.y.sort(fn);
	n = pix.x.length-1;

	w = pix.x[n] - pix.x[0];
	h = pix.y[n] - pix.y[0];
	var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);

	canvas.width = w;
	canvas.height = h;
	ctx.putImageData(cut, 0, 0);
}

function drawCircularText(canvas, text, diameter, startAngle, inwardFacing, fName, fSize, kerning)
{
    // text:         The text to be displayed in circular fashion
    // diameter:     The diameter of the circle around which the text will
    //               be displayed (inside or outside)
    // startAngle:   In degrees, Where the text will be shown. 0 degrees
    //               if the top of the circle
    // inwardFacing: true for base of text facing inward. false for outward
    // fName:        name of font family. Make sure it is loaded
    // fSize:        size of font family. Don't forget to include units
    // kearning:     0 for normal gap between letters. positive or
    //               negative number to expand/compact gap in pixels
 //------------------------------------------------------------------------

	// declare and intialize canvas, reference, and useful variables
	var ctx = canvas.getContext('2d');
	var clockwise = -1; // draw clockwise for aligned right. Else Anticlockwise
	startAngle = startAngle * (Math.PI / 180); // convert to radians

	// Calc heigt of text in selected font:
 	var d = document.createElement("span");
    d.style.fontFamily = fName;
    d.style.fontSize = fSize;
    d.textContent = text;
    document.body.appendChild(d);
    var textHeight = d.offsetHeight;
    document.body.removeChild(d);
   ...