How to save two canvas(outer and inner) as png using fabric js in angular

Issue

while i save canvas it only saves outer canvas and ignores inner canvas

 //html

<button type="button" (click)="save()">save</button>
<div class="outercanvas">
      <canvas id="outercanvas"  width="500" height="500"></canvas>  
</div>
<div class="outerCanvas">
    <canvas id="outerCanvas" width="140" height="170" ></canvas>  
</div>

//ts code

canvas  = new fabric.Canvas('outercanvas');
canvas1 = new fabric.Canvas("innerCanvas");
save(){
 window.open(this.canvas.toDataURL('png'));
}

Solution

Ofc because you never asked it to save the innercanvas just like you did for outercanvas.

save(){
 window.open(this.canvas.toDataURL('png'));
}

To save inner canvas as separately you can call same for inner canvas.

save(){
 window.open(this.canvas.toDataURL('png')); //outercanvas
 window.open(this.canvas1.toDataURL('png')); //innercanas
}

If you want to save both canvases in one image then follow below steps

1. Take output of inner canvas
2. Place that image over outercanvas using fabric.Image.fromURL()
3. Save the output of outer canvas
4. Remove the image from outercanvas, so it will be like, image never exist

Note: In 2nd step you have to position the image, use left and top property for or that, if you want to place it in center using canvas.centerObject(img);

Answered By - Gitesh Sharma