How to fill canvas and add text

Question

I want to fill my canvas with a image (base64-string) and than add a text into the canvas.

Initial idea (javascript browser application): I want to set the base64-string txtb64 (Image) as background image of the canvas and than add the text over it.

downloadtext: function() {
  var sign = this.getView().byId("SigId");
  var txtb64 = signpad.getSignAsJpeg();

  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext('2d');
  var image = new Image();
  image.src = txtb64;
  image.addEventListener("load", function(event) {
    console.log("Ready!");
  });

  ctx.drawImage(image, 0, 0);

  ctx.fillText('My random text', 0, 0);

  var dataURL = canvas.toDataURL("image/jpeg");

  var image = new Image();
  var element = document.createElement('a');

  image.src = dataURL;

  element.setAttribute('href', image.src);
  element.setAttribute('download', 'image');
  element.style.display = 'none';

  element.click();
},

The problem is I always get a black rectangle as output. What is wrong with my code, because i can see no error.

Answer 1

It looks like you should put the code needed to download the new image inside the "load" event handler of the image you create. This is needed because the load event could trigger after the code beneath it runs, resulting in an empty image being put onto the canvas.

Also you declare var image = new Image(); twice, which could also be causing issues. Calling one image1 and the other image2 will prevent that.

WARNING Running this snippet triggers a download request.

 var data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAFpUlEQVR4nO3a0W7bOBRAQf//T3efFnAFibzeNN2ecgYIEiu2EoDCAUnp9QMg4vV///HZPsXk/voqSYJ3LiPNb7Pagrsev8bp7P+cx6ny7a1w+idbTuQTrTEadb/UUmKcZ113MnmZmonUeI863WoXp+p7Jea7HOIsR51vcBWkXneuG+905d0tG/m5GnC/bLeOeQrP6Pp2ZcRYjzpdMlnq7u4PT89x9hrMYcf6zp2emJjOup/Ncj01/5gxGnC/b3embzpCeHhxdhZGzGHE+9hSK6ab49NGFuyWlO4VnM9p8ZBWh68+7GdPTOe9mUatZGecw2ox9ZV9pGqDVeTzWgBFnbDqLuvv9J3cL349Nlo6cw6gz9rS/dH29CttuaTg9H2cy+oztQnR9vXuEYXo3cfV/cBYjz0eeHi1Y3d375HzX49dj17/FWYw8H1nFYrekm0btaSa3+/v8/Yw+Y7ul31Oc7l5fz3f3PpHiypXA2Go5ONksfwrbKnh3f4NzuQL4yG6mtFoCrs65u8O4OwdncAXwkcnjCO/f7z6zmjV9smHPeVwRjO32m6ZLw9W5V/tg4IpgZDfr2e1nrT6z+jy8c0WwNd23muxf7WZc030vzuSKYGn62MLq83evd48/2MfijquBpadwTPeqdpHbzb4sD3nnKmBrt7yb/H4XnMkmvWjhCmBkNfv59/Xq+/DfmID5+2XZIAAAAASUVORK5CYII="; var can = document.getElementById('can'); var ctx = can.getContext('2d'); var img = new Image(); img.src = data; img.addEventListener('load', e => { ctx.drawImage(img, 0, 0); ctx.fillText('My random text', 100, 100); var dataURL = can.toDataURL("image/jpeg"); var image = new Image(); var element = document.createElement('a'); image.src = dataURL; element.setAttribute('href', image.src); element.setAttribute('download', 'image'); document.body.appendChild(element); element.click(); });

 <canvas width="300" height="300" id="can"></canvas>