Example of highligther based on CanvasHighlighter

rulers.js

function RulersHighlighter2(highlighterEnv) {
  CanvasHighlighter.call(this, highlighterEnv);
}

RulersHighlighter2.prototype = extend(CanvasHighlighter.prototype, {
  typeName: "RulersHighlighter",

  textStep: 100,
  graduationStep: 5,
  stepScale: 1,

  // event emitted when viewport change (zoom, size, etc)
  onViewportChange() {
    // recalc the steps
  },
  
  // event emitted every time we need to redraw the canvas
  // (a.k.a. RequestAnimationFrame)
  onUpdate(ctx) {
    let { width, height, pixelRatio } = this.viewport;
    let dpr = getDisplayPixelRatio(this.env.window);

    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.fillRect(0, 0, width * pixelRatio, 16 * dpr);
    ctx.fillRect(0, 0, 16 * dpr, height * pixelRatio);

    this.drawAxis("x", ctx);
    this.drawAxis("y", ctx);
  },

  drawAxis(axis, ctx) {
    // draw axis on canvas
  }
  
});