demo/index.js
function metrics(context) {
  //x-height
  context.fillStyle = 'blue'
  context.fillRect(0, -layout.height + layout.baseline, 15, -layout.xHeight)

  //ascender
  context.fillStyle = 'pink'
  context.fillRect(27, -layout.height, 36, layout.ascender)

  //cap height
  context.fillStyle = 'yellow'
  context.fillRect(110, -layout.height + layout.baseline , 18, -layout.capHeight)

  //baseline
  context.fillStyle = 'orange'
  context.fillRect(140, -layout.height, 36, layout.baseline)

  //descender
  context.fillStyle = 'green'
  context.fillRect(0, 0, 30, layout.descender)

  //line height
  context.fillStyle = 'red'
  context.fillRect(0, -layout.height + layout.baseline, 52, layout.lineHeight)
  
  //bounds
  context.strokeRect(0, 0, layout.width, -layout.height)
}
function metrics(context) {
  //x-height
  context.fillStyle = 'blue'
  context.fillRect(0, -layout.height + layout.baseline, 15, -layout.xHeight)

  //ascender
  context.fillStyle = 'pink'
  context.fillRect(27, -layout.height, 36, layout.ascender)

  //cap height
  context.fillStyle = 'yellow'
  context.fillRect(110, -layout.height + layout.baseline , 18, -layout.capHeight)

  //baseline
  context.fillStyle = 'orange'
  context.fillRect(140, -layout.height, 36, layout.baseline)

  //descender
  context.fillStyle = 'green'
  context.fillRect(0, 0, 30, layout.descender)

  //line height
  context.fillStyle = 'red'
  context.fillRect(0, -layout.height + layout.baseline, 52, layout.lineHeight)
  
  //bounds
  context.strokeRect(0, 0, layout.width, -layout.height)
}
function metrics ( context ) { //x-height context . fillStyle = 'blue' context . fillRect ( 0 , - layout . height + layout . baseline , 15 , - layout . xHeight ) //ascender context . fillStyle = 'pink' context . fillRect ( 27 , - layout . height , 36 , layout . ascender ) //cap height context . fillStyle = 'yellow' context . fillRect ( 110 , - layout . height + layout . baseline , 18 , - layout . capHeight ) //baseline context . fillStyle = 'orange' context . fillRect ( 140 , - layout . height , 36 , layout . baseline ) //descender context . fillStyle = 'green' context . fillRect ( 0 , 0 , 30 , layout . descender ) //line height context . fillStyle = 'red' context . fillRect ( 0 , - layout . height + layout . baseline , 52 , layout . lineHeight ) //bounds context . strokeRect ( 0 , 0 , layout . width , - layout . height ) }
draw our metrics squares
draw our metrics squares