Scale multiple texts to width of canvas

A method to scale multiple texts to width of 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");

let txt = "Kara Meese";
var fontsize = fitTextOnCanvas(txt, "verdana");
//const angle = -45;
//context.rotate(angle * Math.PI / 180);
//context.textAlign = 'center';
context.fillText(txt, 0, context.width - fontsize);

function fitTextOnCanvas(text, fontface) {
    // start with a large font size
    var fontsize = 1024;

    // lower the font size until the text fits the canvas
    do {
        fontsize--;
        context.font = fontsize + "px " + fontface;
    } while (context.measureText(text).width > canvas.width)
 	return fontsize;
}

function generateTextWatermark(text, size) {
	let canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');
	const fontsize = measureTextBinaryMethod(text, 'monospace', 0, 10, canvas.width);
	canvas.width = ctx.measureText(text).width + 2;
	canvas.height = canvas.width;
	
	const angle = -45;
	ctx.rotate(angle * Math.PI / 180);
	ctx.textAlign = 'center';
	ctx.fillText(text, 0, ctx.width - fontsize);
	return canvas;

	// https://jsfiddle.net/be6ppdre/29/
	function measureTextBinaryMethod(text, fontface, min, max, desiredWidth) {
		if (max - min < 1) return min;
		let test = min + ((max - min) / 2); // Find half interval
		ctx.font = `${test}px ${fontface}`;
		let measureTest = ctx.measureText(text).width;

		const condition = measureTest > desiredWidth;
		return measureTextBinaryMethod(text, fontface, condition ? min : test, 
			condition ? test : max, desiredWidth);
	}
}