<style>
  /* Rulers
——————————————————————————————————————*/

  #ruler_corner {
    background: var(--ruler-color);
    grid-area: corner;
    width: 15px;
    height: 15px;
    overflow: hidden;
  }

  #ruler_x {
    background: var(--ruler-color);
    grid-area: rulerX;
    height: 15px;
    border-bottom: 1px solid;
    border-left: 1px solid #777;
    overflow: hidden;
  }

  #ruler_y {
    background: var(--ruler-color);
    grid-area: rulerY;
    width: 15px;
    border-right: 1px solid;
    border-top: 1px solid #777;
    overflow: hidden;
  }

  #ruler_x canvas {
    float: left;
  }
</style>
<div id="ruler_corner"></div>
<div id="ruler_x">
  <div>
    <canvas height="15"></canvas>
  </div>
</div>
<div id="ruler_y">
  <div>
    <canvas width="15"></canvas>
  </div>
</div>