title: Save Canvas With Background Image And Text Content As image
body: <p>How can I save canvas with background data and text content as Image.</p>
  
  <p>I have tried toDataUrl but its returning me only blank canvas.</p>
  
  <pre><code>&lt;canvas id="canvas" width="578" height="250" crossOrigin="Anonymous"&gt;&lt;/canvas&gt;
  &lt;a id="link_save" href="https://google.com/" target="_blank"&gt;SAVE&lt;/a&gt;
  
  &lt;script&gt;
  
  function wrapText(context, text, x, y, maxWidth, lineHeight) {
      var words = text.split(' ');
      var line = '';
  
      for(var n = 0; n &lt; words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth &gt; maxWidth &amp;&amp; n &gt; 0) {
          context.fillText(line, x, y);
          line = words[n] + ' ';
          y += lineHeight;
        }
        else {
          line = testLine;
        }
      }
      context.fillText(line, x, y);
    }
  
  var canvas = document.getElementById('canvas');
  var image = new Image();
  image.src = './img/bg.jpg';
  var base = canvas.toDataURL();
  console.log(base);
  image.onload = function () {
  var context = canvas.getContext('2d');
  
  var width = 500;
  var height = 500;
  context.drawImage(image, 10, 0, 300, 200); // resizes image to 300px wide, 200px high
  
  
    var maxWidth = 400;
    var lineHeight = 25;
    var x = (canvas.width - maxWidth) / 2;
    var y = 60;
    var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';
  
    context.font = '16pt Calibri';
    context.fillStyle = '#333';
  
    wrapText(context, text, x, y, maxWidth, lineHeight);
  };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have tried saving canvas but only returns blank canvas, not with content.</p>