How can I zoom in to only a portion of the page?

[Yutyun]

I am enjoyning the app. I especially like the point where I can easily move to browse mode and immidiately edit my design on the website.

One question I have is, how can I zoom in to only a portion of the page, either using JavaScript or CSS? I am showing an editing page of Canva, and I want to be able to see my design bigger, but the normal "Zoom In" doesn't work, and I wish there is a way to visually select (by specifying the pixel range) and show only that part of the website. Is that a possible thing? I'm looking forward for somebody's answer. Thank you.

---

[sindresorhus]

You could try either:

/**
  Zooms into a specific portion of an element.

  @param {string} selector - The CSS selector of the element to zoom.
  @param {number} scale - The zoom scale factor.
  @param {number} x - The x-coordinate to center on.
  @param {number} y - The y-coordinate to center on.

  Usage example:
  zoomInto('.my-element', 2, 100, 100);
*/
function zoomInto(selector, scale, x, y) {
  const element = document.querySelector(selector);
  const translateX = x * (1 - scale);
  const translateY = y * (1 - scale);
  element.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
}

// Example usage:
zoomInto('.my-element', 2, 100, 100);

or

/**
  Zooms into a specific portion of an element using CSS clip-path.

  @param {string} selector - The CSS selector of the element to zoom.
  @param {number} scale - The zoom scale factor.
  @param {number} x - The x-coordinate of the top-left corner of the clipping region.
  @param {number} y - The y-coordinate of the top-left corner of the clipping region.
  @param {number} width - The width of the clipping region.
  @param {number} height - The height of the clipping region.

  Usage example:
  zoomAndClip('.my-element', 2, 100, 100, 200, 200);
*/
function zoomAndClip(selector, scale, x, y, width, height) {
  const element = document.querySelector(selector);
  element.style.transform = `scale(${scale})`;
  element.style.clipPath = `inset(${y}px ${x + width}px ${y + height}px ${x}px)`;
}

// Example usage:
zoomAndClip('.my-element', 2, 100, 100, 200, 200);