fontBoundingBox is not implemented · Automattic/node-canvas#1940

2021-11-29T17:37:40.000Z

## Issue or Feature - [x] If this is an issue with installation, I have read the [troubleshooting guide](https://github.com/Automattic/node-canvas/issues/1511). Hi! I was expecting to use fontBoundingBox, but as it turns out there's a TODO in code left and it isn't done. I saw some PR's that said it couldn't be done. Could there be some kind of resolution or workaround to experience the same effect as fontBoundingBox? In the visible image, I would like to get the blue part. (fontBoundingBox) ![image](https://user-images.githubusercontent.com/81387799/143916085-e1289398-82ea-4fe5-a3ce-0daf3d3b7dfe.png) ## Steps to Reproduce ```js import Canvas from 'canvas'; const canvas = Canvas.createCanvas(10, 10); const ctx = canvas.getContext('2d') const measure = ctx.measureText("woohoo!"); console.log(measure.fontBoundingBoxAscent) // undefined :( ``` ## Your Environment * Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): canvas@2.8.0 * Environment (e.g. node 4.2.0 on Mac OS X 10.8): v16.4.2 on Windows

(1 Kommentar) (2 Reaktionen) (0 zugewiesene Personen)JavaScript (9.524 Stars) (1.140 Forks)batch import

Help wantedText & Fonts

Beschreibung

Issue or Feature

If this is an issue with installation, I have read the troubleshooting guide.

Hi! I was expecting to use fontBoundingBox, but as it turns out there's a TODO in code left and it isn't done. I saw some PR's that said it couldn't be done. Could there be some kind of resolution or workaround to experience the same effect as fontBoundingBox?

In the visible image, I would like to get the blue part. (fontBoundingBox)

Steps to Reproduce

import Canvas from 'canvas';

const canvas = Canvas.createCanvas(10, 10);

const ctx = canvas.getContext('2d')
const measure = ctx.measureText("woohoo!");

console.log(measure.fontBoundingBoxAscent) // undefined :(

Your Environment

Version of node-canvas (output of npm list canvas or yarn list canvas): canvas@2.8.0
Environment (e.g. node 4.2.0 on Mac OS X 10.8): v16.4.2 on Windows

Contributor Guide

Tech Stack: javascript
Domain: api
Issue Type: feature
Schwierigkeit: 4
Geschätzte Zeit: over 1 week
Aktivitätsstatus: stale
Klarheit: needs investigation
Voraussetzungen: Basic C++ knowledgeUnderstanding of Node.js native addonsFamiliarity with Cairo library
Einsteigerfreundlichkeit: 20
Research-Richtung: The issue requests the implementation of fontBoundingBox property in the CanvasRenderingContext2D. The TODO is likely in the C++ binding code for the measureText function. Start by examining the current measureText implementation in src/Canvas.cc or similar. Previous PRs attempting this may have discussions about limitations. Investigate the Cairo API for font metrics and how to expose them. The maintainers have not responded, so consider asking for clarification on the desired behavior and any prior attempts.