code: 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)
  }
docs: draw our metrics squares