Quiero crear un lienzo que tenga un texto que pueda tener una cantidad X de imágenes en línea.

La idea es que el texto se interpole de Test [img1] the total [img2] a Test <img src="img1.png" /> the total <img src="img2.png" /> . La función de interpolación ya está funcionando según lo previsto.

Después de interpolar el texto, quiero que devuelva un lienzo con el texto y las imágenes en línea.

Actualmente, tengo:

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

Devolviendo [objeto HTMLImageElement] en lugar de la imagen en el lienzo recién creado.

Ejemplo:

 Test [object HTMLImageElement] the total [object HTMLImageElement]