Published
Edited
Oct 27, 2020
Importers
text = 'Hello World'
measure(text, { font: "Segoe UI", size: 16 })
measure(text, { size: 20 })
measure(text, { font: "Arial" })
ruler = {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
canvas.height = 0;
canvas.width = width;
function measureText(text, options) {
const { size, font } = { ...defaultOptions, ...options };
canvas.height = size + 10;
const textSize = context.measureText(text).width;
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = size + 'px ' + font;
context.fillText(text, 0, size);
const textMetrics = context.measureText(text);
return (
Math.abs(textMetrics.actualBoundingBoxLeft) +
Math.abs(textMetrics.actualBoundingBoxRight)
);
}
return Object.assign(canvas, { measureText });
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
