diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 0a9c3d264..e6375ea81 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -269,39 +269,46 @@ const drawElementOnCanvas = ( if (!config) { break; } - if (!customElementImgCache[config.customType]) { - const img = document.createElement("img"); - img.id = config.customType; - if (typeof config.svg === "string") { + if (typeof config.svg === "string") { + if (!customElementImgCache[element.id]) { + const img = document.createElement("img"); img.src = config.svg; - } else { - const svg = config.svg(element); - if (svg instanceof Promise) { - svg.then((res) => { + img.id = element.id; + customElementImgCache[img.id] = img; + } + } else if (typeof config.svg === "function") { + const svg = config.svg(element); + if (svg instanceof Promise) { + svg.then((res) => { + if (!customElementImgCache[element.id]) { + const img = document.createElement("img"); + img.id = element.id; img.src = res; customElementImgCache[img.id] = img; - context.drawImage( - customElementImgCache[config.customType], + customElementImgCache[element.id], 0, 0, element.width, element.height, ); - }); - } else { - img.src = svg; - } + } + }); + } else if (!customElementImgCache[element.id]) { + const img = document.createElement("img"); + img.id = element.id; + img.src = svg; + customElementImgCache[img.id] = img; } - customElementImgCache[img.id] = img; } context.drawImage( - customElementImgCache[config.customType], + customElementImgCache[element.id], 0, 0, element.width, element.height, ); + break; } default: {