Две идентичные кнопки JavaScript, одна работает, а другая нет

У меня есть функция php, которая повторяет сценарии 2 js, каждый сценарий создает кнопку, которая при нажатии создает изображение и загружает его. Проблема в том, что первая кнопка работает (рисовать и загружать), а вторая — нет (только рисовать), хотя они оба представляют собой идентичный код и не содержат ошибок в консоли, может кто-то помочь и указать, что здесь не так.

function download_button($mabez_blades)
{

echo <<<TEST
<script type="text/javascript" src="dygraph-extra.js"></script>


<img id="img" style="width:1000px; height:300px;" alt="image first"/>
<canvas id="canvas" width="1000" height="300" >canvas</canvas>
<button type="button" onclick="saveImage()">save image</button>

<script type="text/javascript">

function plotimg() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("img");
Dygraph.Export.asPNG(gSC_2_1, img);
ctx.drawImage(img, 0, 0);
};

function saveImage() {
plotimg()

var link = document.createElement('a');
link.download = "test.png";
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(link.href);
link.click();
};
</script>


TEST;

echo <<<KKK

<img id="img1"  style="width:1000px; height:300px;" alt="image second"/>
<canvas id="myCanvas" width="1000" height="300">myCanvas</canvas>
<button type="button" onclick="downloadCanvas()">Download Pictures</button>

<script type="text/javascript">

function drawcanvas() {
var canvas1 = document.getElementById("myCanvas");
var ctx1 = canvas1.getContext("2d");
var img1 = document.getElementById("img1")
Dygraph.Export.asPNG(gSC_2_1, img1);
ctx1.drawImage(img1, 0, 0);
};

function downloadCanvas() {
drawcanvas()
var link1 = document.createElement('b');
link1.download = "experment.png";
link1.href = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(link1.href);
link1.click();
};

</script>
KKK;



}