Set background image to canvas and export it with text+image

Question

I am trying to solving one problem , I have a textarea which works fine and exporting text to canvas , but I don't know how to achieve the same effect and add background image option to this, it could be a static background image from the beginning, here is script .When i was trying to set background image via html , i had background image behind the text , but when i was exporting i had only text in my 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";

});

Answer 1

i have solved it!

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);
      }
    
    
    });

one more question how i can set padding top for textarea text on canvas?