<style>
/* ---------- Version: 12.1.2024
html, body {
  width: 100%;
  height: 100%;
}
&nbsp;
body {
  background: #f0f0f0;
}
-----------&nbsp;*/
div.daishi {
  position: relative;
  width: 95%;
  max-width: 600px;
  margin: 1rem auto;
}
div.daishi::after {
  content: "";
  padding-bottom: 69%;
  display: block;
}
div.daishi canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: 100%;
  transform: translate(-50%, -50%);
}
div.daishi canvas#render {
  display: none;
}
&nbsp;
section.daishi {
  width: 95%;
  margin: 1rem auto;
  max-width: 400px;
}
section.daishi a,
section.daishi input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.8rem;
}
section.daishi a {
  padding: 0.6em 0.5em 0.5em;
  border: none;
  background: #121212;
  color: white;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
section.daishi a:hover {
  opacity: 0.9;
}
section.daishi input {
  padding: 0.25em 0.5em;
  font-family: Times, sans-serif;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  border: 1px solid #e9e9e9;
  text-align: center;
 
	max-width:20em;
	margin:auto;
}
section.daishi input::-moz-placeholder {
  color: #ccc;
}
section.daishi input:-ms-input-placeholder {
  color: #ccc;
}
section.daishi input::placeholder {
  color: #ccc;
}
section.daishi input + * {
  margin-top: 0.5rem;
}  
</style>  
&nbsp;
 
<div class="daishi">
  <canvas id="background" height="414" width="600"></canvas>
  <canvas id="text" height="414" width="600"></canvas>
  <canvas id="render" height="414" width="600"></canvas>
</div>
&nbsp;
<section class="daishi">
<input id="name" type="text" placeholder="Geliebte/ Geliebter/ Haustier" maxlength="28">
<input id="line1" type="text" placeholder="Line 1" maxlength="40">
<input id="line2" type="text" placeholder="Line 2" maxlength="40">
<input id="line3" type="text" placeholder="Line 3" maxlength="40">
<input id="year" type="text" placeholder="Januar 1, 1980 - December 31, 2020" maxlength="40">
  <a id="load" href="#">Download</a>
</section>
&nbsp;
<script>
console.clear();
&nbsp;
class GrabsteinGenerator {
  constructor() {
    this.initializeGlobals();
    this.initializeDOM();
    this.initialize();
  }
&nbsp;
  initializeGlobals() {
    let ogw = 833;
    let ogh = 576;
    let ar = ogh / ogw;
    this.w = 600;
    this.h = this.w * ar;
  }
&nbsp;
  initializeDOM() {
    this.$cvsBackground = document.querySelector('#background');
    this.$ctxBackground = this.$cvsBackground.getContext('2d');
    this.$cvsText = document.querySelector('#text');
    this.$ctxText = this.$cvsText.getContext('2d');
    this.$cvsRender = document.querySelector('#render');
    this.$ctxRender = this.$cvsRender.getContext('2d');
&nbsp;
    this.$name = document.querySelector('#name');
    this.$name.addEventListener('input', () => {this.onChange();});
    this.$line1 = document.querySelector('#line1');
    this.$line1.addEventListener('input', () => {this.onChange();});
    this.$line2 = document.querySelector('#line2');
    this.$line2.addEventListener('input', () => {this.onChange();});
    this.$line3 = document.querySelector('#line3');
    this.$line3.addEventListener('input', () => {this.onChange();});
 
    this.$year = document.querySelector('#year');
    this.$year.addEventListener('input', () => {this.onChange();});
    this.$load = document.querySelector('#load');
    this.$load.addEventListener('click', () => {this.onRender();});
&nbsp;
    this.$cvsBackground.height = this.h;
    this.$cvsBackground.width = this.w;
    this.$cvsText.height = this.h;
    this.$cvsText.width = this.w;
    this.$cvsRender.height = this.h;
    this.$cvsRender.width = this.w;
  }
&nbsp;
  initialize() {
    let url = 'Hier data:image/png;base64, Eingeben  ';
    this.$img = new Image();
    this.$img.src = url;
    this.$img.addEventListener('load', () => {
      this.onLoad();
    });
  }
&nbsp;
  onLoad() {
    this.$ctxBackground.drawImage(this.$img, 0, 0, this.w, this.h);
  }
&nbsp;
  onChange() {
    this.drawText([
    this.$name.value,  
    this.$line1.value,
    this.$line2.value,
    this.$line3.value,
    this.$year.value,
    ]);
&nbsp;
  }
&nbsp;
  onRender() {
    this.$ctxRender.drawImage(this.$cvsBackground, 0, 0);
    this.$ctxRender.drawImage(this.$cvsText, 0, 0);
    this.$load.href = this.$cvsRender.toDataURL();
    this.$load.download = 'Grabstein.png';
  }
&nbsp;
  drawText(text) {
    this.$ctxText.shadowColor = 'rgba(255, 255, 255, 0.4)';
    this.$ctxText.shadowOffsetX = 1;
    this.$ctxText.shadowOffsetY = 1;
    this.$ctxText.shadowBlur = 0.5;
    this.$ctxText.clearRect(0, 0, this.w, this.h);
    let sizes = [24, 15, 15, 15, 12];
    let top = this.h * 0.35;
    text.forEach((line, i) => {
      line = line.toUpperCase();
      let fontSize = sizes[i];
      this.$ctxText.fillStyle = 'rgba(0, 0, 0, 0.55)';
      this.$ctxText.font = `${fontSize}px Times`;
      this.$ctxText.textAlign = 'center';
      this.$ctxText.textBaseline = 'top';
      this.$ctxText.fillText(line, this.w / 2, top);
      top += fontSize * 1.3;
      if (i === text.length - 2) top += 10;
    });
  }}
&nbsp;
 
let tg = new GrabsteinGenerator();  
</script>