Category: JavaScript

Sometimes, we want to find the height of text on an HTML canvas with JavaScript.

In this article, we’ll look at how to find the height of text on an HTML canvas with JavaScript.

How to find the height of text on an HTML canvas with JavaScript?

To find the height of text on an HTML canvas with JavaScript, we can use the canvas context’s measureText method.

For instance, we write

const metrics = ctx.measureText(text);
const fontHeight =
  metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
const actualHeight =
  metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

to call measureText on the ctx canvas context.

We call it with the text string to get the text‘s dimensions.

And then we get the fontHeight and actualHeight with

metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;

and

metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

Conclusion

To find the height of text on an HTML canvas with JavaScript, we can use the canvas context’s measureText method.

Sometimes, we want to access JSON property with "-" dash with JavaScript.

In this article, we’ll look at how to access JSON property with "-" dash with JavaScript.

How to access JSON property with "-" dash with JavaScript?

To access JSON property with "-" dash with JavaScript, we can use a string.

For instance, we write

const profileId = jsonObj["profile-id"];

to access the profile-id property from jsonObj with jsonObj["profile-id"].

Conclusion

To access JSON property with "-" dash with JavaScript, we can use a string.

Sometimes, we want to limit concurrency when using JavaScript’s Promise.all().

In this article, we’ll look at how to limit concurrency when using JavaScript’s Promise.all().

How to limit concurrency when using JavaScript’s Promise.all()?

To limit concurrency when using JavaScript’s Promise.all(), we can call splice on the promise array to return a new promise functions array with fewer items than the original.

For instance, we write

while (funcs.length) {
  await Promise.all(funcs.splice(0, 100).map((f) => f()));
}

to call funcs.splice to remove the firs 100 items from the funcs promise functions array and return them in a new array.

Then we call map to call f to return the promises.

And we use Promise.all to run the promises in parallel.

We use the while loop to run all the promises in funcs until they’re all removed from it.

Conclusion

To limit concurrency when using JavaScript’s Promise.all(), we can call splice on the promise array to return a new promise functions array with fewer items than the original.

Sometimes, we want to replace matched item with lodash and JavaScript.

In this article, we’ll look at how to replace matched item with lodash and JavaScript.

How to replace matched item with lodash and JavaScript?

To replace matched item with lodash and JavaScript, w can use the map function.

For instance, we write

const arr = [
  { id: 1, name: "Person 1" },
  { id: 2, name: "Person 2" },
];

const newArr = _.map(arr, (a) => {
  return a.id === 1 ? { id: 1, name: "Person New Name" } : a;
});

to call Lodash map with the arr array and a callback that maps the entries in arr to new values.

If the id of the object in arr is 1, then we return a new object.

Otherwise, we return a as is.

Conclusion

To replace matched item with lodash and JavaScript, w can use the map function.