Create image using canvas

index.js

function measureTextBinaryMethod(context, 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(context, text, fontface, min, test, desiredWidth)
	} else {
		var found = measureTextBinaryMethod(context, text, fontface, test, max, desiredWidth)
	}
	return found;
}

/** Creates a canvas filled with a 45-degree pinstripe.
 * @returns the filled HTMLCanvasElement. */

function createPinstripeCanvas() {
	const patternCanvas = document.createElement("canvas");
	const pctx = patternCanvas.getContext('2d', {
		antialias: true
	});
	const colour = "#707070";
	const CANVAS_SIDE_LENGTH = 75;
	const WIDTH = CANVAS_SIDE_LENGTH;
	const HEIGHT = CANVAS_SIDE_LENGTH;
	const DIVISIONS = 4;

	patternCanvas.width = WIDTH;
	patternCanvas.height = HEIGHT;
	pctx.fillStyle = colour;

	// Top line
	pctx.beginPath();
	pctx.moveTo(WIDTH, HEIGHT * (1 / DIVISIONS));
	pctx.lineTo(WIDTH, 0);
	pctx.lineTo(WIDTH - WIDTH * (1 / DIVISIONS), 0);
	pctx.fill();

	// Middle line
	pctx.beginPath();
	pctx.moveTo(0, HEIGHT * (1 / DIVISIONS));
	pctx.lineTo(0, 0);
	pctx.lineTo(WIDTH * (1 / DIVISIONS), 0);
	pctx.lineTo(WIDTH, HEIGHT - HEIGHT * (1 / DIVISIONS));
	pctx.lineTo(WIDTH, HEIGHT);
	pctx.lineTo(WIDTH - WIDTH * (1 / DIVISIONS), HEIGHT);
	pctx.fill();

	// Bottom line
	pctx.beginPath();
	pctx.moveTo(0, HEIGHT - HEIGHT * (1 / DIVISIONS));
	pctx.lineTo(WIDTH * (1 / DIVISIONS), HEIGHT);
	pctx.lineTo(0, HEIGHT);
	pctx.fill();

	return patternCanvas;
}

/** Fills the whole area of a given htmlCanvasElement with a patternCanvas.
 * @param targetCanvas – the HTMLCanvasElement to fill into.
 * @param patternCanvas – a HTMLCanvasElement containing a pattern to fill with.
 */

function fillWithPattern(targetCanvas, patternCanvas) {
	const ctx = targetCanvas.getContext('2d', {
		antialias: false,
		depth: false
	});
	const width = targetCanvas.width;
	const height = targetCanvas.height;
	const text = width + "x" + height;
	const fontFace = "verdana";
	if (!width || !height) throw new Error("progressCanvas's width/height falsy.");
	ctx.fillStyle = "#808080";
	ctx.fillRect(0, 0, width, height);
	ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
	ctx.fillRect(0, 0, width, height);
	ctx.fillStyle = "#b0b0b0";
	ctx.font = "bolder " + measureTextBinaryMethod(targetCanvas.getContext('2d', {
		antialias: false,
		depth: false
	}), text, fontFace, 0, width, width / 2) + "px " + fontFace;
	ctx.textAlign = "center";
	ctx.textBaseline = "middle"
	ctx.fillText(text, width / 2, height / 2);
	return targetCanvas;
}

function getImage(width, height) {
	var targetCanvas = document.createElement("canvas");
	targetCanvas.setAttribute("width", width);
	targetCanvas.setAttribute("height", height);
	var image = document.createElement("img");
	image.height = height;
	image.width = "100%";
	image.style.width = "100%";
	image.style.maxWidth = width + "px";
	image.src = fillWithPattern(targetCanvas, createPinstripeCanvas()).toDataURL();
	return image;
}

You need to set 'Fingerprinting protection' to 'Allow fingerprinting' when the site is not secure (localhost, sites without ssl cert) in privacy-protection related browsers