Salvar muitos elementos da tela como imagem

Eu tenho 3 camadas de tela - 1 é matriz, 2 e 3 são gráficos, como preservá-los em uma imagem?

<div style="position: relative;">
 <canvas id="matix" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

questionAnswers(1)

yourAnswerToTheQuestion