如何在图像顶部添加空格以生成模因代码？

Question

我正在制作一个模因生成器，并且试图找到一种方法在图像标题上创建空白区域，因此，当我下载图像时，标题也将成为其中的一部分。

>

如果您想查看该页面，以便将其放在互联网上：https://liadaltif.000webhostapp.com/

顺便说一句-很抱歉，我给了我很长的新代码，所以我不必分享其中的哪一部分。

<script>
  function textChangeListener (evt) {
      var id = evt.target.id;
      var text = evt.target.value;
      
      if (id == "topLineText") {
        window.topLineText = text;
      } else {
        window.bottomLineText = text;
      }
      
      redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText);
    }
    </script>
    <script>
    function redrawMeme(image, topLine, bottomLine) {
     
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext("2d");
      if (image != null)
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      
      
      ctx.clearRect (0, 0,  canvas.width, canvas.height);
      
      if (image != null)
				ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      
     
      ctx.font = '30pt Impact';
      ctx.textAlign = 'center';
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 3;
      ctx.fillStyle = 'white';
      
      if (topLine != null) {
        ctx.fillText(topLine, canvas.width / 2, 40);
        ctx.strokeText(topLine, canvas.width / 2, 40);
      }
      
      if (bottomLine != null) {
        ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 20);
        ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 20);
      }
    }
    </script>
    <script>
  function download_image(){Is
  var canvas = document.getElementById("mcanvas");
  image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  var link = document.createElement('a');
  link.download = "MemeNumber.png";
  link.href = image;
  link.click();
}
</script>
	<script>
    function handleFileSelect(evt) {
      
      var canvasWidth = 500;
      var canvasHeight = 500;
      var file = evt.target.files[0];
      
     
      var reader = new FileReader();
      reader.onload = function(fileObject) {
        var data = fileObject.target.result;
        
      
        var image = new Image();
        image.onload = function() {
          
          window.imageSrc = this;
          redrawMeme(window.imageSrc, null, null);
        }
        
     
        image.src = data;
        console.log(fileObject.target.result);
      };
      reader.readAsDataURL(file)
    }
    window.imageSRC = null;
    window.topLineText = "";
    window.bottomLineText = "";
window.imageSRC = null;
		window.topLineText = null;
		window.bottomLineText = null;

		var file = document.querySelector("#file");
		file.onchange = handleFileSelect;

    var input1 = document.getElementById('topLineText');
    var input2 = document.getElementById('bottomLineText');
    input1.oninput = textChangeListener;
    input2.oninput = textChangeListener;
    document.getElementById('file').addEventListener('change', handleFileSelect, false);
    document.querySelector('button').addEventListener('click', saveFile, false);
    </script>

<style>
::placeholder {
  color: black;
 }
 </style>
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a.activee {
	float: right;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
<style>
body { 
  background: lightblue url("Theme.jpg") fixed center; 
}
</style>
<style>


input[type=text] {
 width: 630px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #20B0FD;
  color: white;
}
button {
 background-color: #4CAF50;
  border: none;
  color: white;
  padding: 20px 30px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer; 
}
input[type=text]:focus {
  outline: 0;
}
input[type=file] {
  font-family: Impact;
  letter-spacing:0.1em;
}
</style>

<body>
<div class="topnav">
  <a class="active" href="Home.html">Home</a>
  <a href="#news">News</a>
  <a class="activee" href="login.jsp">Login</a>
  <a class="activee" href="Register.html">Register</a>
</div>
<br>
<div class= "container" align="center">
 
    <input type="file" id="file" />  
  </div>
  <div id="image-container" align="center" >
  
    <canvas id="mcanvas" width="500" height="500"   ></canvas>
    <br>
    </div>
    <div class = "inputs" align="center">
    
      <br> 
      <input id="topLineText" type="text" placeholder="TOP LINE" autocomplete="off" ><br/>
      <br>
      <input id="bottomLineText" type="text" placeholder="BOTTOM LINE" autocomplete="off" ><br/>
      <button id="saveBtn" onclick="download_image()">Save</button>
      <br>
     <a href="MakeMeme.html" >Reset</a>
  </div>

https://pastebin.com/qF2PnzuE