Scaling multiple texts to full width of canvas, improved method
A faster way to scale multiple texts to the width of a canvas
by ajmeese7
HTML
<canvas id="canvas" width=600 height=600></canvas>
CSS
body {
background-color: ivory;
}
#canvas {
border:1px solid red;
}
JavaScript
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
texts = [
Math.random(),
"AARON MEESE",
]
yPos = 0;
texts.forEach(function(txt) {
var fontsize = fitTextOnCanvas(txt, "verdana");
yPos += fontsize;
// draw the text
context.fillText(txt, 0, yPos);
})
function fitTextOnCanvas(text, fontface){
var size = measureTextBinaryMethod(text, fontface, 0, 600, canvas.width);
return size;
}
function measureTextBinaryMethod(text, fontface, min, max, desiredWidth) {
if (max-min < 1) {
return min;
}
var test = min+((max-min)/2); //Find half interval
context.font=test+"px "+fontface;
measureTest = context.measureText(text).width;
if ( measureTest > desiredWidth) {
var found = measureTextBinaryMethod(text, fontface, min, test, desiredWidth)
} else {
var found = measureTextBinaryMethod(text, fontface, test, max, desiredWidth)
}
return found;
}