function getRetinaRatio() { var devicePixelRatio = window.devicePixelRatio || 1 var c = document.createElement('canvas').getContext('2d') var backingStoreRatio = [ c.webkitBackingStorePixelRatio, c.mozBackingStorePixelRatio, c.msBackingStorePixelRatio, c.oBackingStorePixelRatio, c.backingStorePixelRatio, 1 ].reduce(function(a, b) { return a || b }) return devicePixelRatio / backingStoreRatio } var ratio = getRetinaRatio() var scaledWidth = width * ratio var scaledHeight = height * ratio via http://bl.ocks.org/devgru/a9428ebd6e11353785f2

HTML Canvas allows for the drawing of text with

ctx.fillStyle = "666";		// text color
ctx.textAlign = "center";		// alignment
ctx.font = "normal 12px Helvetica Neue";		// font
ctx.fillText("my Text, x , y);		// draw

Sometimes, you might want to draw a border around the text. Getting the textHeight should not present a problem, after all we can set the font size directly. But textWidth is not fixed in that way, because it depends (nnnn) on the actual text that is being displayed. ctx.measureText takes the text as an argument and returns an object with a width property, describing the width of the text.

var texttWidth = ctx.measureText(columnName).width;

width is for now the only inhabitant of that object, but it would be a fair guess, that it might be more densely populate in the future.

With jQuery document ready:

$(function(){
	var canvas = $('#testCanvas')[0];
	canvas.addEventListener('mousedown', function(e){
		e.preventDefault();
		e.stopPropagation();
		e.target.style.cursor = 'move';
	}, false);
	canvas.addEventListener('mouseup', function(e){
		e.target.style.cursor = 'default';
	}, false);
});

And without…

$('#testCanvas')[0].addEventListener('mousedown', function(e){
	e.preventDefault();
	e.stopPropagation();
	e.target.style.cursor = 'move';
}, false);

$('#testCanvas')[0].addEventListener('mouseup', function(e) {
	e.target.style.cursor = 'default';
}, false);

Based on this: http://stackoverflow.com/questions/2659999/html5-canvas-hand-cursor-problems