const { top, bottom } = nextElement.getBoundingClientRect();
if (!(top >= offset && bottom + offset <= document.documentElement.clientHeight)) {
  animatedScrollTo({
    element: nextElement,
    duration,
    offset,
  });
}

import React, { useState, useEffect, useRef } from 'react';
import styles from './Onboarding.scss';
const Overlay = ({ targetStyles }) => {
  const [scrollY, setScrollY] = useState(0);
  const canvasRef = useRef();
  const handleRepaint = () => {
    const canvas = canvasRef.current;
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    canvas.width = windowWidth;
    canvas.height = windowHeight;
  };
  useEffect(handleRepaint, [scrollY, targetStyles]);
  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  return (
    <div className={styles.overlay}>
      <canvas ref={canvasRef} />
    </div>
  );
};
export { Overlay };

const handleRepaint = () => {
  ...
  const context = canvas.getContext('2d');
  context.fillStyle = overlayColor;
  context.globalAlpha = overlayOpacity;
  context.fillRect(0, 0, windowWidth, windowHeight);
  context.fillStyle = '#ffffff';
  context.globalAlpha = 1;
};

// в targetStyles все свойства с учетом белой обводки
// для корректного расположения hint'а без сдвигов
const { width, height, top, left } = targetStyles;
const x = left - window.scrollX;
const y = top - window.scrollY;
roundClearRect({ ctx: context, x, y, width, height, radius });

// функция для рисования прямоугольника со скруглениями,
// путём отрисовки каждого угла по отдельности
// с помощью кривой линии методом quadraticCurveTo
const roundRect = ({ ctx, x, y, width, height, radius = 5, fill, stroke }) => {
  const bottom = y + height;
  const right = x + width;
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(right - radius, y);
  ctx.quadraticCurveTo(right, y, right, y + radius);
  ctx.lineTo(right, bottom - radius);
  ctx.quadraticCurveTo(right, bottom, right - radius, bottom);
  ctx.lineTo(x + radius, bottom);
  ctx.quadraticCurveTo(x, bottom, x, bottom - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  if (fill) {
    ctx.fill();
  }
  if (stroke) {
    ctx.stroke();
  }
};
const roundClearRect = ({ ctx, x, y, width, height, radius }) => {
  roundRect({
    ctx,
    x,
    y,
    width,
    height,
    radius: 5,
    fill: true,
  });
  ...
};

const roundClearRect = ({ ctx, x, y, width, height, radius }) => {
  ...
  ctx.globalCompositeOperation = 'destination-out';
  if (radius >= 25) {
    ctx.beginPath();
    ctx.arc(x + width / 2, y + height / 2, width / 2 - BORDER_WIDTH, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  } else {
    roundRect({
      ctx,
      x: x + BORDER_WIDTH,
      y: y + BORDER_WIDTH,
      width: width - BORDER_WIDTH * 2,
      height: height - BORDER_WIDTH * 2,
      radius,
      fill: true,
    });
  }
};

const PIXEL_RATIO = (function () {
  const ctx = document.createElement('canvas').getContext('2d');
  const pixelRatio = window.devicePixelRatio || 1;
  const backingStorePixelRatio = ctx.webkitBackingStorePixelRatio
    || ctx.mozBackingStorePixelRatio
    || ctx.msBackingStorePixelRatio
    || ctx.oBackingStorePixelRatio
    || ctx.backingStorePixelRatio || 1;
  return pixelRatio / backingStorePixelRatio;
}());
function makeCanvasHiPPI(canvas) {
  canvas.style.width = `${canvas.width}px`;
  canvas.style.height = `${canvas.height}px`;
  canvas.width *= PIXEL_RATIO;
  canvas.height *= PIXEL_RATIO;
  const context = canvas.getContext('2d');
  context.scale(PIXEL_RATIO, PIXEL_RATIO);
  return context;
}

const steps = [
  target: document.getElementById('first-el'),
  size: "large",
  placement: "top",
  align: "center",
  title: <div className="title">Первый этап</div>,
  subtitle: <div className="subtitle">Подзаголовок</div>,
  header: <Image />
];
<Onboarding steps={steps} showCounter />}