0

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?

Sam
  • 2,398
  • 4
  • 25
  • 37

1 Answers1

2

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.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • this is correct, see this thread for an example of how to downscale an image: http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas?rq=1 – jdog Jul 29 '13 at 07:47