Автосохранение изображения или кнопка

Question

Этот код предназначен для написания текста на изображении. У меня возникли проблемы с сохранением изображения, я не могу сохранить его на телефоне. У меня есть решение, и я смог сохранить изображения на телефоне. В ответе номер 1 Автоматическое сохранение изображения на локальном компьютере

, но я не смог использовать его для своего кода

function myFunction() {
	document.getElementById("canvas").style.display = "block";
	var x = document.getElementById("myText").value;
	//demoo document.getElementById("demo").innerHTML = x;

	addTextToImage("https://l.top4top.io/p_1549mpaz31.png", x);
}
function addTextToImage(imagePath, text) {
    var circle_canvas = document.getElementById("canvas");
    var context = circle_canvas.getContext("2d");

    // Draw Image function
    var img = new Image();
    img.src = imagePath;
    img.onload = function () {
        context.font = "40px Cairo";
        context.textAlign = "center";
        context.drawImage(img, 0, 0);
        context.lineWidth = 1;
        context.fillStyle = "#ffffff";
        context.lineStyle = "#ffff00";
        context.fillText(text, 520, 790);
        
    }
} 

@import url('https://fonts.googleapis.com/css?family=Cairo:300,400,600,700,900');
.container {
  position: relative;
  font-family: Arial;
  font-family: 'Cairo';
  
}

<canvas style="display:none" id="canvas" width="1080" height="1080"></canvas>
<input type="text" id="myText" value="write your name">
<button onclick="myFunction()">button</button> .. 
<p id="demoo"></p>

Answer 1

Я добавил кодовую ручку для вас. Пожалуйста, проверьте и дайте мне знать, если у вас есть еще вопросы. Я просто сосредоточился на том, как можно скачать изображение с холста. Я думаю, что это ваш самый важный вопрос.

HTML

<input type="text" id="text" placeholder="write your name">
<button onclick="writeText()">Show Image</button>  
<button onclick="download()">Download Image</button>  
<canvas id="canvas" width="200" height="200"></canvas>

JS

function writeText() {
    console.log("Hello")
    var canvas = document.getElementById("canvas");
    var name = document.getElementById("text").value;

    if(name.trim() == "" || name.trim().length == 0) {
            alert("Write something in the text box first");
            return;
    }
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText(name, 10, 50);
}

function download() {
    writeText()
    var link = document.createElement('a');
    link.download = 'text.png';
    link.href = document.getElementById("canvas").toDataURL()
    link.click();
}

https://codepen.io/kousik-mandal/pen/RwWjmqM

Спасибо.