Javascript 将背景图像设置为画布，并使用文本导出它+；形象

我正在尝试解决一个问题，我有一个文本区域，可以很好地工作并将文本导出到画布，但我不知道如何实现同样的效果，并在其中添加背景图像选项，它可能从一开始就是一个静态背景图像，下面是脚本。当我试图通过html设置背景图像时，我在文本后面有背景图像，但当我导出时，我的png中只有文本

   var canvas = $('#canvas');
var ctx = canvas.get(0).getContext('2d');



canvas.width = 600;
canvas.height = 400;



$('#submit').click(function (e) {
  e.preventDefault();


  var text = $('#text').val(),
      fontSize = parseInt($('#font-size').val()),
      width = parseInt($('#width').val()),
      lines = [],
      line = '',
      lineTest = '',
      words = text.split(' '),
      currentY = 0;
  
  ctx.font = fontSize + 'px Arial';
    
  for (var i = 0, len = words.length; i < len; i++) {
    lineTest = line + words[i] + ' ';
    
    // Check total width of line or last word
    if (ctx.measureText(lineTest).width > width) {
      // Calculate the new height
      currentY = lines.length * fontSize + fontSize;

      // Record and reset the current line
      lines.push({ text: line, height: currentY });
      line = words[i] + ' ';
    } else {
      line = lineTest;
    }
  }


  
  // Catch last line in-case something is left over
  if (line.length > 0) {
    currentY = lines.length * fontSize + fontSize;
    lines.push({ text: line.trim(), height: currentY });
  }
  
  // Visually output text
  ctx.clearRect(0, 0, 500, 500);
  for (var i = 0, len = lines.length; i < len; i++) {
    ctx.fillText(lines[i].text, 0, lines[i].height);
  }

  var canvasCtx = document.getElementById("canvas").getContext('2d');
  var img = document.getElementById("yourimg");
  canvasCtx.drawImage(img,x,y);
  
  var img = new Image();
  img.onload = function(){
      canvasCtx.drawImage(img,x,y);
  };
  
img.src = "https://i.stack.imgur.com/7Whkw.png";

});

var canvas=$（'#canvas'）；
var ctx=canvas.get（0.getContext（'2d'）；
画布宽度=600；
画布高度=400；
$（“#提交”）。单击（函数（e）{
e、 预防默认值（）；
var text=$（'#text'）.val（），
fontSize=parseInt（$（'#font size'）.val（）），
width=parseInt（$（'#width'）.val（）），
行=[]，
行=“”，
lineTest=“”，
单词=文本。拆分（“”），
电流y=0；
ctx.font=fontSize+'px Arial'；
for（var i=0，len=words.length；iwidth）{
//计算新高度
currentY=lines.length*fontSize+fontSize；
//记录并重置当前行
push（{text:line，height:currentY}）；
行=字[i]+''；
}否则{
line=lineTest；
}
}
//抓住最后一行，以防有东西剩下
如果（直线长度>0）{
currentY=lines.length*fontSize+fontSize；
push（{text:line.trim（），height:currentY}）；
}
//可视化输出文本
ctx.clearRect（0,0500500）；
对于（变量i=0，len=lines.length；i

我已经解决了

var canvas = $('#canvas');
var ctx = canvas.get(0).getContext('2d');
    
    
    
    
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    
    var img = new Image();
    var height = 600;
    var width = 600;
    img.onload = function() {
      context.save();
        context.rect(0, 0, 200, 200);//Здесь первый 0=X
    
        context.drawImage(img,0, 0,width,height);//Первый 0=X
        context.restore();
    };
    img.src = 'https://i.stack.imgur.com/5uvJN.png';
    
    
    $('#submit').click(function (e) {
      e.preventDefault();
    
    
    
      
      var text = $('#text').val(),
          fontSize = parseInt($('#font-size').val()),
          width = parseInt($('#width').val()),
          lines = [],
          line = '',
          lineTest = '',
          words = text.split(' '),
          currentY = 0;
      
      ctx.font = fontSize + 'px Arial';
        
      for (var i = 0, len = words.length; i < len; i++) {
        lineTest = line + words[i] + ' ';
        
        // Check total width of line or last word
        if (ctx.measureText(lineTest).width > width) {
          // Calculate the new height
          currentY = lines.length * fontSize + fontSize;
    
          // Record and reset the current line
          lines.push({ text: line, height: currentY });
          line = words[i] + ' ';
        } else {
          line = lineTest;
        }
      }
    
    
      
      // Catch last line in-case something is left over
      if (line.length > 0) {
        currentY = lines.length * fontSize + fontSize;
        lines.push({ text: line.trim(), height: currentY });
      }
      
      // Visually output text
      ctx.clearRect(0, 500, 500, 500);
      for (var i = 0, len = lines.length; i < len; i++) {
        ctx.fillText(lines[i].text, 410, lines[i].height);
      }
    
    
    });

var canvas=$（'#canvas'）；
var ctx=canvas.get（0.getContext（'2d'）；
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var img=新图像（）；
var高度=600；
var宽度=600；
img.onload=函数（）{
context.save（）；
context.rect（0，0，200，200）；//
上下文.drawImage（img，0，0，宽度，高度）；//Пцц0=X
restore（）；
};
img.src=https://i.stack.imgur.com/5uvJN.png';
$（“#提交”）。单击（函数（e）{
e、 预防默认值（）；
var text=$（'#text'）.val（），
fontSize=parseInt（$（'#font size'）.val（）），
width=parseInt（$（'#width'）.val（）），
行=[]，
行=“”，
lineTest=“”，
单词=文本。拆分（“”），
电流y=0；
ctx.font=fontSize+'px Arial'；
for（var i=0，len=words.length；iwidth）{
//计算新高度
currentY=lines.length*fontSize+fontSize；
//记录并重置当前行
push（{text:line，height:currentY}）；
行=字[i]+''；
}否则{
line=lineTest；
}
}
//抓住最后一行，以防有东西剩下
如果（直线长度>0）{
currentY=lines.length*fontSize+fontSize；
push（{text:line.trim（），height:currentY}）；
}
//可视化输出文本
ctx.clearRect（0500500）；
对于（变量i=0，len=lines.length；i

---

还有一个问题，我如何设置画布上文本区域文本的顶部填充？

5行，从代码底部向上--

vertical\u offset=10
ctx.fillText（第[i]行）。文本，410，第[i]行。高度+垂直偏移）你是一个神圣的兄弟，谢谢你它的工作有一个美好的一天和生活！