Convert WebGL canvas to static img in place

canvas-to-image.js

function canvasToImage(canvas) {
  const {top, left, height, width} = canvas.getBoundingClientRect();
  const mapImage = document.createElement('img');
  mapImage.setAttribute('src', canvas.toDataURL('image/png'));
  mapImage.setAttribute('style', `position: absolute; z-index: 2147483638; top: ${top}px; left: ${left}px; width: ${width}px; height: ${height}px;`);
  document.body.appendChild(mapImage);
};

// Convert all canvas elements on the page to images.
document.querySelectorAll('canvas').forEach((canvas) => {
  canvasToImage(canvas);
});

// This works for 2D canvases or already rendered 3D canvases. For animated 3D canvases
// (with Three.js for example), the resulting image might be transparent. This can be fixed
// by converting the canvas to an image immediately after render. See: https://stackoverflow.com/a/30647502