Canvas within element not being rendered in SVG

[Zander1983]

Hi
The div element I want to convert to an SVG contains canvas elements, as well as regular HTML elemenrs. These canvas elements are not being rendered. What I would like rendered:

What is actually being rendered:

Is it possible to also render the canvas elements?

[LanderBeeuwsaert]

I have the same requirement, and indeed nothing being rendered. @Zander1983 did you find a solution eventually?

[jkurkure]

Hi, saw this thread. Just wanted to say, I had this exact same issue. What I did was to convert all the Canvas elements in my page into PNGs, and then convert to SVG, which causes the graphics to appear properly. As far as I can tell, there is no visual difference when I do this.

Here's the code I used to do the conversion:

// Get all canvas elements on the page
const canvases = document.querySelectorAll('canvas');

// Loop through each canvas
canvases.forEach(canvas => {
  // Create a temporary canvas to draw the image
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  const tempContext = tempCanvas.getContext('2d');
  tempContext.drawImage(canvas, 0, 0);

  // Get the PNG data URL from the temporary canvas
  const pngDataUrl = tempCanvas.toDataURL('image/png');

  // Create a new image element with the PNG data URL
  const img = document.createElement('img');
  img.src = pngDataUrl;

  // Replace the canvas with the image
  canvas.parentNode.replaceChild(img, canvas);
});

[op3]

I adapted your code to also work with hidpi canvases:

// Get all canvas elements on the page
const canvases = document.querySelectorAll('canvas');

// Loop through each canvas
canvases.forEach(canvas => {
  // Create a temporary canvas to draw the image
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  rect = canvas.getBoundingClientRect();
  scaleX = rect.width / canvas.width;
  scaleY = rect.height / canvas.height;
  const tempContext = tempCanvas.getContext('2d');
  tempContext.drawImage(canvas, 0, 0);

  // Get the PNG data URL from the temporary canvas
  const pngDataUrl = tempCanvas.toDataURL('image/png');

  // Create a new image element with the PNG data URL
  const img = document.createElement('img');
  img.src = pngDataUrl;
  img.style.transform = "scale(" + scaleX + ", " + scaleY + ")";
  img.style.transformOrigin = "0 0";

  // Replace the canvas with the image
  canvas.parentNode.replaceChild(img, canvas);
});