Code snippets for the "How we built the DevTools Tooltips" article

clip-mask.ts

// This is our mask element, a 100%/100% semi-transparent
// element sitting on the whole UI.
const mask = ...;

// Start defining a path used to clip the mask.
// First, go around the outer perimeter.
const polygon = ['0 0', '100% 0', '100% 100%', '0 100%', '0 0'];

// And then clip away the highlighted areas from the mask.
// To do this, we go around their shapes, in reverse direction.
const toClip = allAreas.map(area => area.points);
for (const points of allAreas) {
  polygon.push(`${points[0].x}px ${points[0].y}px`);
  for (const point of points.reverse()) {
    polygon.push(`${point.x}px ${point.y}px`);
  }
  // Remember to go back to 0/0 between each area.
  polygon.push('0 0');
}

// Apply the clip.
mask.setAttribute('style', `clip-path:polygon(${polygon.join(',')});`);