Sample 1: measure text in canvas using context.measureText

var text = 'हिन्दी में लिखना बहुत आसान है';
var font = '30pt Arial';
var metrics = getTextHeight(font, text);
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.font = font;
ctx.textBaseline = 'top';
ctx.fillText(text, 10, 100);
ctx.strokeRect(10,100,ctx.measureText(text).width,metrics.height);
function getTextHeight(font, s) {
    debugger;
  s = s || 'Hg';
  var text = $('<span>'+s+'</span>').css({ font: font });
  var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

  var div = $('<div></div>');
  div.append(text, block);

  var body = $('body');
  body.append(div);

  try {

    var result = {};

    block.css({ verticalAlign: 'baseline' });
    result.ascent = block.offset().top - text.offset().top;

    block.css({ verticalAlign: 'bottom' });
    result.height = block.offset().top - text.offset().top;

    result.descent = result.height - result.ascent;

  } finally {
    div.remove();
  }

  return result;
};

Sample 2: bounding box calculation for SVG using getBBox method. SVG also provides getComputedTextLength method to calculate text width

var string = 'हिन्दी में लिखना बहुत आसान है';
var draw = SVG("drawing");
var text = draw.text(function(add)
                     {
                         add.tspan(string).dy(100);
                     }).font(
    {
        family: "Verdana",
        size: 20
    });
var bbox = text.bbox();
var rect = draw.rect(bbox.width,bbox.height)
.center(bbox.cx,bbox.cy)
.stroke('#f06')
.fill('none');

Sample 3: breaking up hindi text into constituent characters in javascript

var text = 'हिंदी में लिखना बहुत आसान है क्रांतिकारी';
var symbols = getSymbols(text);
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.font = '30pt Arial';
ctx.fillText(text, 10, 100);

var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.font = '30pt Arial';
var x = 10;
for(var i = 0; i < symbols.length; i++)
{
    var sym = symbols[i];
    ctx2.fillText(sym, x, 100);
    x += ctx2.measureText(sym).width;    
}

var div = document.getElementById('div');
for(var i = 0; i < symbols.length; i++)
{
    var node = document.createTextNode(symbols[i]);
    div.appendChild(node);
}

function getSymbols(text)
{
    var i = 0;
    var symbols = [];
    while(i < text.length)
    {
        var x = getSymbol(text, i);
        symbols.push(x.symbol);
        i = x.next;
    }
    return symbols;
}

function getSymbol(text, i)
{
    var N = text.length;
    var answer = i < N ? text[i] : '';
    var j = i + 1;
    while (j < N && isDiacritic(text.charCodeAt(j)))
    {
        answer += text[j++];        
    }
    return  { symbol: answer, next: j };
}


function isDiacritic(unicode)
{
    // diacritics for hindi from http://en.wikipedia.org/wiki/Devanagari#Devanagari_in_Unicode
    return (unicode >= 2366 && unicode <= 2388)
           || (unicode >= 0x901 && unicode <= 0x903);
}

Sample 4: rasterizing SVG on top of canvas

var draw = SVG(document.createElement('div'));
var font = { family: 'verdana', size: 36 };
var text = draw.text('Hello World!').font(font);
// Create a Data URI.
var mySVG = draw.node.outerHTML;
var mySrc = 'data:image/svg+xml;base64,'+window.btoa(mySVG);
var img = new Image();
img.src = mySrc;
var img2 = new Image();
img2.src = 'http://svgjs.com/images/filter.jpg';
// Get drawing context for the Canvas
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(img2,0,0);
context.drawImage(img,0,0);

Another Sample