CODEWITHSUNDEEP
javascriptcanvasprinting
user3533469
user3533469

Reputation: 59

Making image from multiple canvases

how to make one single IMG from multiple canvases? I want to make button to my web app that will make one single image from more overlaid canvases. I found this option but i don´t know how to make it work with multiple canvases to single image. Thank you

function print() {
var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
}

Upvotes: 1

Views: 797

Answers (1)

user1693593
user1693593

Reputation:

Simply draw the canvases into your main canvas:

Assuming they have id's:

var canvasMain = document.getElementById('canvasMain'); //destination canvas
var ctx = canvasMain.getContext('2d');

var canvas1 = document.getElementById('canvas1');       // layer 1
var canvas2 = document.getElementById('canvas2');       // layer 2
var canvas3 = document.getElementById('canvas3');       // layer 3

ctx.drawImage(canvas1, 0, 0);    // draw canvas 1 into main canvas
ctx.drawImage(canvas2, 0, 0);    // draw canvas 2 into main canvas
ctx.drawImage(canvas3, 0, 0);    // draw canvas 3 into main canvas

var dataUri = canvasMain.toDataURL(); //extract main canvas as url

Hope this helps!

Upvotes: 3

Related Questions