I want to create a Canvas that has a text that can have X number of inline images.

The idea is that the text would be interpolated from Test [img1] the total [img2] to Test <img src="img1.png" /> the total <img src="img2.png" />. The interpolation function is already working as intended.

After interpolating the text, I want it to return a Canvas with the text and in-line images.

Currently, I have:

const descImg = (string) => {
 const image = new Image();
 image.src = require('../assets/description/' + string + '.png');
 return image;
};
const replacements = {
 // Icons
 img1: descImg('img1'),
 img2: descImg('The2ndImage'),
};

// Desc
function parseDesc(d) {
   const interpolate = (string, values) => string.replace(/\[([^\]]*)\]/g, (match, offset) => {
      return values[offset];
   });

   var canvas = document.createElement("canvas");
   canvas.width = 115;
   canvas.height = 65;

   var ctx = canvas.getContext('2d');
   ctx.font = "bolder 9.4pt";
   const x = 10;
   const y = 10;
   const lineheight = 1.6;
   const lines = interpolate(d.data.description, replacements).replaceAll("\\n","<br/>").split('\n');
   for (var i = 0; i<lines.length; i++)
      ctx.fillText(lines[i], x, y + (i * lineheight));

   return canvas.toDataURL();
}

Returning [object HTMLImageElement] in place of the image on the newly created canvas.

Example:

Test [object HTMLImageElement] the total [object HTMLImageElement]