How to load an HTML file into the canvas?

Loading HTML content into a canvas requires converting HTML to an image format that canvas can display. The most effective approach uses SVG foreignObject to wrap HTML, then render it as an image.

Method 1: Using SVG foreignObject

The foreignObject element allows embedding HTML content within SVG, which can then be rendered on canvas.

<canvas id="myCanvas" width="500" height="300"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// HTML content wrapped in SVG foreignObject
const htmlContent = `
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
  <foreignObject x="0" y="0" width="500" height="300">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; padding: 20px;">
      <h2 style="color: blue;">Hello Canvas!</h2>
      <p>This HTML is rendered in canvas</p>
      <button style="padding: 10px;">Click Me</button>
    </div>
  </foreignObject>
</svg>`;

// Create image from SVG
const img = new Image();
const svgBlob = new Blob([htmlContent], {type: 'image/svg+xml'});
const url = URL.createObjectURL(svgBlob);

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    URL.revokeObjectURL(url); // Clean up
};

img.src = url;
</script>

Method 2: Loading External HTML File

You can fetch an external HTML file and embed it into the SVG structure:

<canvas id="htmlCanvas" width="600" height="400"></canvas>

<script>
async function loadHTMLToCanvas() {
    const canvas = document.getElementById('htmlCanvas');
    const ctx = canvas.getContext('2d');
    
    try {
        // Fetch HTML content (replace with your HTML file path)
        const response = await fetch('/sample.html');
        const htmlText = await response.text();
        
        // Wrap in SVG foreignObject
        const svgContent = `
        <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
          <foreignObject x="0" y="0" width="600" height="400">
            <div xmlns="http://www.w3.org/1999/xhtml">
              ${htmlText}
            </div>
          </foreignObject>
        </svg>`;
        
        const img = new Image();
        const blob = new Blob([svgContent], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);
        
        img.onload = () => {
            ctx.drawImage(img, 0, 0);
            URL.revokeObjectURL(url);
        };
        
        img.src = url;
        
    } catch (error) {
        console.error('Failed to load HTML:', error);
    }
}

// Load HTML when page loads
loadHTMLToCanvas();
</script>

Key Points

• SVG foreignObject: Enables HTML embedding within SVG
• XHTML namespace: Required for HTML content inside foreignObject
• Blob and URL: Convert SVG string to image source
• Canvas limitations: Rendered HTML becomes static image, no interactivity

Browser Compatibility

Conclusion

Loading HTML into canvas requires converting HTML to SVG using foreignObject, then rendering as an image. This creates a static representation perfect for generating screenshots or visual snapshots of HTML content.