convert multiple canvases to dataURL in html5

Question

I want to join multiple canvases to make a single image. So is there any method to covert more than one canvases to toDataURL to make a single image?

Answer 1

create a function that takes multiple arguments (canvas elements), puts them on one blank canvas, then returns the dataurl for the newly made canvas.

var getImadeData = function () {
    var i = arguments.length,
        tempCanvas = document.createElement("canvas"),
        ctx = tempCanvas.getContext("2d");
     while (i--) {
        ctx.drawImage(arguments[i], 0, 0);
    };
    return tempCanvas.toDataURL();
};

Now just feed the function multiple canvas elements you want to put into one dataurl like so.

var newData = getImageData(canvas1, canvas2, canvas3);

In this example, the last canvas is placed on the blank canvas first so make sure to order your canvas elements appropriately.

Answer 2

Yes, the drawImage method on the canvas 2d rendering context accepts canvas elements as image elements. So all you have to do is:

• Create a new canvas
• Get its context
• Draw all other canvases to it with drawImage
• Extract the final image from this new canvas