omed in portion, overlaying the main canvas
    this.zoom = createCanvas(this.container, "zoom");

    this.removeHandlers = handleResizes(this, debounceRate);
  }
  /**
   * Remove the handlers and elements
   *
   * @return {type}  description
   */
  destroy() {
    this.removeHandlers();
    this.container.removeChild(this.main.canvas);
    this.container.removeChild(this.zoom.canvas);
  }
}

module.exports = Canvases;

/**
 * Create the containing div
 *
 * @param  {HTMLDivElement} parentEl
 * @return {HTMLDivElement}
 */
function createContainingDiv(parentEl) {
  const div = parentEl.ownerDocument.createElementNS(HTML_NS, "div");
  Object.assign(div.style, FULLSCREEN_STYLE);
  parentEl.appendChild(div);
  return div;
}

/**
 * Create a canvas and context
 *
 * @param  {HTMLDivElement} container
 * @param  {string} className
 * @return {object} { canvas, ctx }
 */
function createCanvas(container, className) {
  const window = container.ownerDocument.defaultView;
  const canvas = container.ownerDocument.createElementNS(HTML_NS, "canvas");
  container.appendChild(canvas);
  canvas.width = container.offsetWidth * window.devicePixelRatio;
  canvas.height = container.offsetHeight * window.devicePixelRatio;
  canvas.className = className;

  Object.assign(canvas.style, FULLSCREEN_STYLE, {
    pointerEvents: "none",
  });

  const ctx = canvas.getContext("2d");

  return { canvas, ctx };
}

/**
 * Resize the canvases' resolutions, and fires out the onResize callback
 *
 * @param  {HTMLDivElement} container
 * @param  {object} canvases
 * @param  {number} debounceRate
 */
function handleResizes(canvases, debounceRate) {
  const { container, main, zoom } = canvases;
  const window = container.ownerDocument.defaultView;

  function resize() {
    const width = container.offsetWidth * window.devicePixelRatio;
    const height = container.offsetHeight * window.devicePixelRatio;

    main.canvas.width = width;
    main.canvas.height = height;
    zoom.canvas.width = width;
    zoom.canvas.height = height;

    canvases.emit("resize");
  }

  // Tests may not need debouncing
  const debouncedResize =
    debounceRate > 0 ? debounce(resize, debounceRate) : resize;

  window.addEventListener("resize", debouncedResize);
  resize();

  return function removeResizeHandlers() {
    window.removeEventListener("resize", debouncedResize);
  };
}
PK