Using HTML5/Canvas/JavaScript to take in-browser screenshots

javascript

responsive-design

performance

canvas

byAnton Shumikhin·Mar 9, 2025

// No-nonsense canvas screenshot capturing
// We are about to get artsy, painting web content to a canvas, and voila, creating an image!

// For instance: Capture the entirety of the window and slap it willy-nilly into the body
const canvas = Object.assign(document.createElement('canvas'), {
  width: window.innerWidth * window.devicePixelRatio,
  height: window.innerHeight * window.devicePixelRatio
});
const ctx = canvas.getContext('2d');
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.drawImage(document.body, 0, 0);
const img = Object.assign(new Image(), {
  src: canvas.toDataURL()
});
document.body.appendChild(img);  // Like throwing paint at a wall and hoping it sticks!

Double-check browser love for toDataURL, and switch out document.body to focus on a specific beaut of an area.

Step by Step Screenshot Guide

html2canvas: Transforming your Screenshot Dreams

The html2canvas library is a metaphorical transformer, turning your DOM into a picture-perfect canvas rendering. Here's how to open up the world of screenshots:

html2canvas(document.body).then(canvas => {
    document.body.appendChild(canvas);
});

Beware, browser compatibility likes to play hard to get. Check out html2canvas GitHub issues for any prima donna behavior.

getDisplayMedia: When a Picture isn't Enough

Feeling fancy? Why stop at DOM when you can capture an entire screen with getDisplayMedia. User action needed; no shady business here:

async function captureScreen() {
    try {
        const mediaStream = await navigator.mediaDevices.getDisplayMedia();
        const video = Object.assign(document.createElement('video'), {
          srcObject: mediaStream
        });
        video.onloadedmetadata = () => {
            video.play();
            const { videoWidth: width, videoHeight: height } = video;
            const captureCanvas = document.createElement('canvas');
            captureCanvas.width = width;
            captureCanvas.height = height;
            const ctx = captureCanvas.getContext('2d');
            ctx.drawImage(video, 0, 0, width, height);
            captureCanvas.toBlob(blob => {
                // Blob: Not a slimy creature, just your screenshot
            });
            // Politeness pays, release the media stream
            mediaStream.getTracks().forEach(track => track.stop());
        };
    } catch (error) {
        console.error('Whoops! We dropped the canvas:', error);
    }
}

When using getDisplayMedia, it's all about user consent. And cleanup after the party! Don't forget to release media resources.

High-res life

You've set the bar high, and so should your screenshots. Stick in window.devicePixelRatio and make them pop:

// Painting in HD!
const scale = window.devicePixelRatio;
canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight * scale;
ctx.scale(scale, scale);

No more pixelated messes, just hi-res masterpieces.

Serving up your Masterpiece

Canvas served, Blob made, it's time to ship. Use canvas.toBlob for the Blob and FileReader for the byte buffet:

canvas.toBlob(blob => {
    const reader = new FileReader();
    reader.onloadend = () => {
        const arrayBuffer = reader.result;
        // Feast your eyes on a delicious ArrayBuffer
    };
    reader.readAsArrayBuffer(blob);
});

Shipping your masterpiece needs both efficiency and security. Served slightly warm to your server, please!

Live Preview, Like a Movie Trailer!

Want to keep your audience hooked? Show them a sneak peek:

const img = new Image();
img.onload = () => {
    // Get creative! Make things move, bounce or twirl here
};
img.src = canvas.toDataURL();
document.body.appendChild(img);

Make it interactive, and you've got an audience entranced!

Error handling, or How I Learned to Stop Worrying and Love the Bug

Face it, things will go wrong. But like a true artist, you have got it under control:

// try-catch: The superhero we need, protecting us from unforeseen bugs
try {
    // All your beautiful, fabulous code goes here...
} catch (error) {
    //...And if something explodes, we catch the ashes here
    console.error('Oopsie Daisy: ', error);
}

A good offense (robust code) + a good defense (solid error handling) = User bliss

Deep Dive: When the Going Gets Tough

Handle Performance like a Rockstar

With a performance-hungry page, opt for asynchronous rendering:

setTimeout(() => ctx.drawImage(document.body, 0, 0), 0);
// No one likes a party pooper: defers rendering and keeps UI smooth

Avoid being "That App," the one that freezes up and spoils the party.

Background Processing: The Silent Hero

OffscreenCanvas lets you secretly create sneaky canvases without meddling with the document tree:

const offscreen = new OffscreenCanvas(width, height);
const offscreenCtx = offscreen.getContext('2d');
offscreenCtx.drawImage(...);
// Do all the shady rendering orders here

Perfect for web workers: let them do the dirty work offstage.

Interactive Bug Reporting: Turn Issues into Art

For interactive bug reporting, we are getting crafty:

canvas.addEventListener('click', event => {
    const x = event.pageX;
    const y = event.pageY;
    // Create a bug report/annotation based on the coordinates
    // X marks the spot where the bug hides!
});