CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Sam
Sam

Reputation: 2446

High Resolution HTML5 Canvas Screenshot

I have been trying to take a high resolution screenshot of an HTML5 canvas element that I have for a visualization consisting of rectangles and circles. The canvas.toDataURL() works great, except that the image produced is limited to the size of the original canvas. What I would really like is to take a screenshot that is 4 or 5 times that of the original canvas.

My strategy, however, has been to create a temporary canvas off-screen like the following: 

function renderScreenshot(canvas, scaleFactor) {
    var ctx = canvas.getContext('2d');
    var screenshotCanvas = document.createElement('canvas'); 
    var screenshotCtx = screenshotCanvas.getContext('2d');
    screenshotCanvas.width = canvas.width * scaleFactor; 
    screenshotCanvas.height = canvas.height * scaleFactor;
    screenshotCtx.drawImage(canvas, 0, 0, canvas.width * scaleFactor, canvas.height * scaleFactor);
    return screenshotCanvas.toDataURL();
}

The problem now is that the scaled image is blurry and pixilated, and does not do me any good. What is the way around this?

Upvotes: 0

Views: 1992

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

Unfortunately, while you can draw paths like you would in a vector image, once they are drawn they become rasterised and cannot be scaled without interpolation.

Instead you would need to completely redraw everything, multiplying all coordinates by your scale factor, to render the path elements properly.

Upvotes: 2

Related Questions