For example:
<img width="1904" alt="Screen Shot 2021-11-05 at 11 59 05 AM" src="https://user-images.githubusercontent.com/29597/140540816-25d6d47b-7aea-4121-aeaa-565accc65b1f.png">

context.clip(region);
      context.beginPath();
      this.draw(context, viewRefs);
      
      context.restore();
    }
  }
  /**
   * Layout self and subviews.
   *
   * Implementations should call `setNeedsDisplay` if a draw is required.
   *
   * The default implementation uses `this.layouter` to lay out subviews.
   *
   * Can be overwritten by subclasses that wish to manually manage their
   * subviews' layout.
   *
   * NOTE: Do not call directly! Use `displayIfNeeded`.
   *
   * @see displayIfNeeded
   */
  layoutSubviews() {
    const {frame, _layouter, subviews, visibleArea} = this;
    const existingLayout = viewsToLayout(subviews);
    const newLayout = _layouter(existingLayout, frame);
    collapseLayoutIntoViews(newLayout);
    subviews.forEach((subview, subviewIndex) => {
      if (rectIntersectsRect(visibleArea, subview.frame)) {
        subview.setVisibleArea(intersectionOfRects(visibleArea, subview.frame));
      } else {