context2d.measureText returns incorrect value
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 31.3k
- Forks
- 4.8k
- PR merge metrics
- No merged PRs in 30d
Description
The measureText() method returns an object that contains the width of the specified text, in pixels.
strokeRect also takes a width in pixels. This program creates a PDF with the text "hello world", and prints a rectangle below it according to its measured width
const jspdf = require("jspdf");
const fs = require("fs");
const doc = new jspdf.jsPDF({
unit: "mm",
format: [8.5 * 25.4, 11 * 25.4],
});
const ctx = doc.context2d;
doc.setFont("Helvetica");
doc.setFontSize(12);
doc.setFillColor(0, 0, 0);
const width = ctx.measureText("hello world");
ctx.fillText("hello world", 50, 50);
// Reported width
ctx.strokeRect(50, 55, width.width, 2);
// Correction attempt 1
ctx.strokeRect(50, 60, width.width / 2.8346456, 2);
// Correction attempt 2
ctx.strokeRect(50, 65, width.width / 2.8346456 * (96 / 72), 2);
// Correction attempt 3
ctx.strokeRect(50, 70, width.width / 2.8346456 * (72 / 96), 2);
fs.writeFile("test.pdf", Buffer.from(doc.output("arraybuffer")), () => {});
The top line, shown here, is not the same width as the text:

The next three lines show how to get from the returned value from the correct value; it looks like a lot of the math inside the implementation isn't necessary.
Additionally, the documented return type is Number, but it actually returns an object of the form { width: number } (as described in the general description).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/modules/context2d.js around line 1388 and reproduce the issue using the JavaScript example in the report. Compare measureText’s returned width and documented return type with the rendered text and strokeRect output; done means the measurement and API documentation consistently match the expected text width and return shape.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100