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);
siddharth's space 