canvas with background text download

by Stalk

HTML

фон: <input type="file" id="bg"><br>
текст: <input type="text" id="txt"><br>
<input type="button" value="download" id="save"><br>

JavaScript

const canvas = document.createElement('canvas')
canvas.width = 400
canvas.height = 300
document.body.appendChild(canvas)

const ctx = canvas.getContext('2d')
ctx.fillStyle = 'orange';
ctx.font = "italic 30pt Arial";

const setBg = () => ctx.drawImage(background,0,0)

const background = document.createElement('img')
background.setAttribute('crossorigin', 'anonymous')
background.onload = setBg

const downloader = document.createElement('a')
downloader.style.display = 'none'
document.body.appendChild(downloader)
downloader.download = 'myimage.png'

txt.oninput = function(){
  setBg()
  ctx.fillText(this.value, 200, 300);
}

bg.onchange = function(file) {
  const reader = new FileReader()
  reader.onload = () => background.src = reader.result
  reader.readAsDataURL(this.files[0])
}

save.onclick = function() {
  downloader.href = canvas.toDataURL()
  downloader.click()
}