画像の上に画像を重ねて、重ねた画像をスクリーンショットしてダウンロード

前提・実現したいこと

画像の上に画像を重ねて、重ねた画像をスクリーンショットしてダウンロードするようにしたいです。

Onclickで呼び出している関数は画像を他の物に変える関数です。

該当のソースコード

php
1<h2>背景の色</h2>
2<p>
3
4<button class="btn btn-primary" onclick="bg_pink()">ピンク色</button>
5<button class="btn btn-primary" onclick="bg_orange()">オレンジ色</button>
6<button class="btn btn-primary" onclick="bg_yellow()">黄色</button>
7<button class="btn btn-primary" onclick="bg_blue()">青色</button>
8<button class="btn btn-primary" onclick="bg_skyblue()">水色</button>
9<button class="btn btn-primary" onclick="bg_green()">緑色</button>
10<button class="btn btn-primary" onclick="bg_usugreen()">薄緑色</button>
11<button class="btn btn-primary" onclick="bg_purple()">むらさき色</button>
12<button class="btn btn-primary" onclick="bg_usupurple()">薄むらさき色</button>
13</p>
14<h2>背景の色</h2>
15<p>
16<button class="btn btn-primary" onclick="p_awa()">泡1</button>
17<button class="btn btn-primary" onclick="p_na1()">斜め線1</button>
18<button class="btn btn-primary" onclick="p_y1()">横線1</button>
19<button class="btn btn-primary" onclick="p_y2()">横線2</button>
20<button class="btn btn-primary" onclick="p_t1()">縦線1</button>
21</p>
22  <?php
23//https://xxxx.xxx/image/user/にpngとして重ねた画像を保存
24$rand = rand(111111111111,99999999999);
25echo '<script>
26$(function() { 
27    $("#download-link").click(function() { 
28        html2canvas($("#screen"), {
29            onrendered: function(canvas) {
30                theCanvas = canvas;
31
32
33                canvas.toBlob(function(blob) {
34                    saveAs(blob, "https://xxxx.xxx/image/user/'.$rand.'.png"); 
35                });
36            }
37        });
38    });
39});
40  </script>';
41echo '<button id="download-link" type="button"><a donwnload="" href="https://xxxx.xxx/image/user/'.$rand.'"  class="btn btn-primary">サムネイルをダウンロード</a></button>';
42?>
43</div>
44<p><div id="screen"><img id="p" height="340" width="480" src="sozai/parts_awa.png" style="z-index: 2; position: absolute;">
45<img id="bg" height="340" width="480" src="sozai/background_pink.png" style="z-index: 1; position: absolute;"></div></p>
46