More efficient height calculation

[jteijema]

Current drawNumbers function places text around the clock's edge by drawing letters on a circular path. However, there is a performance issue and an unnecessary DOM manipulation problem when measuring text height. Rapidly adding/removing elements can cause micro-memory leaks in some browsers.

var div = document.createElement("div");
div.innerHTML = text;
div.style.position = 'absolute';
div.style.top = '-10000px';
div.style.left = '-10000px';
div.style.fontFamily = this.selectedFont;
div.style.fontSize = radius*0.15*this.fontScale + "px";
document.body.appendChild(div);
var textHeight = div.offsetHeight;
document.body.removeChild(div);

The Canvas API already provides a way to measure text height without using the DOM:

var textMetrics = ctx.measureText(locations[num]);
var textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;

This will probably draw the letters a bit different but for me ctx.fillText(text[j], 0, (inwardFacing ? 1 : -1) * (0 - radius + textHeight * 2)); fixed the spacing.