JS/TS Snippets

measure-text.ts

const get2dCanvasContext = (): CanvasRenderingContext2D | null => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')

  if (!context) return context

  const { fontWeight, fontSize, fontFamily } = window.getComputedStyle(document.body)
  context.font = `${fontWeight} ${fontSize} ${fontFamily}`

  return context
}

const context = get2dCanvasContext()

if (!context) {
  // Handle null context...
}

const textWidth = context.measureText('Hello world!').width

px-per-rem.ts

const pxPerRem = Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)

sleep.ts

const sleep = (milliseconds: number = 0): Promise<void> => new Promise(resolve => setTimeout(resolve, milliseconds));
  
console.log('I feel asleep...');
await sleep(1_000);
console.log('Wakey wakey!');