Resize the canvas output image to a specific size (width/height)

Question

I have a big canvas (5000x5000) and I want to take a picture of it and create a thumbnail on client side. I can capture the image using canvas.toDataURL

Answer 1

Something like this should work, given you don't have security restrictions on the original canvas element:

var resizedCanvas = document.createElement("canvas");
var resizedContext = resizedCanvas.getContext("2d");

resizedCanvas.height = "100";
resizedCanvas.width = "200";

var canvas = document.getElementById("original-canvas");

resizedContext.drawImage(canvas, 0, 0, 200, 100);
var myResizedData = resizedCanvas.toDataURL();