Skip to content

Instantly share code, notes, and snippets.

@shrys
Last active March 22, 2019 06:11
Show Gist options
  • Save shrys/46c786fd443203041cb89a7446838f15 to your computer and use it in GitHub Desktop.
Save shrys/46c786fd443203041cb89a7446838f15 to your computer and use it in GitHub Desktop.
Create image using canvas
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;
}
@shrys
Copy link
Author

shrys commented Mar 22, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment