While Drawing svg on canvas font is not getting applied on the canvas preview

Question

I draw an SVG image onto a canvas element. The SVG image is using a certain font, but when drawing the SVG on canvas the font is not getting applied on canvas preview.

HTML

<h3>Original Svg</h3>
    <svg id="svgData" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" text-anchor="middle" viewBox="0 0 1584 648">
        <style>
            @import url("https://fonts.googleapis.com/css2?family=Ms+Madi&amp;family=PT+Sans&amp;Roboto+Condensed");
        .Rrrrr { fill: red; }
        </style>
        
        <text font-family="Ms Madi" x="987" y="90" font-size="40" class="personalization personalization_text_1">Font to be changed</text>
        <text font-family="Ms Madi" x="987" y="350">
        </text>
        
        <g id="MAIN_PIC" xmlns:zcc="http://www.zund.com/ZCC" zcc:date="2022-03-16T17:10:52" zcc:version="3.1.6.28469">
        <rect style="fill:none;stroke:#000000;stroke-miterlimit:10;" width="1584" height="648"></rect>
    </g>
    </svg>
<hr>
<h3>Canvas preview</h3>
<canvas id="canvas1" ></canvas>

JS

drawPrevCanvas();
    function drawPrevCanvas() {
    var svg = document.getElementById('svgData');

      var xml = new XMLSerializer().serializeToString(svg);
      var svg64 = btoa(xml);
      var b64Start = 'data:image/svg+xml;base64,';
      var image64 = b64Start + svg64;
      
      var hcanvas_prev_3 = document.getElementById('canvas1');
      var ctx3 = hcanvas_prev_3.getContext("2d");
      
      var svgImgPrev = new Image();
      svgImgPrev.crossOrigin = "Anonymous";
      hcanvas_prev_3.width = 400;
      hcanvas_prev_3.height = 164;

      svgImgPrev.onload = function() {
        ctx3.drawImage(svgImgPrev, 0, 0, 400, 164);
      }
      svgImgPrev.src = image64;
    }

Image

JSFiddle

Answer 1

I'm currently working on this and trying to get an answer. Usually with it you want to use this in your JavaScript:

hcanvas_prev_3.font = 'font name';

This usually should replace the font within the preview. However, it seems to be not loading the font.

However I decided to see if the font was the issue here, and I changed it to Raleway provided by Google Fonts. It seems to load on the original svg.

Here is a photo to show:

Weirdly when I assign it in the JavaScript like so:

hcanvas_prev_3.font = "Raleway";

Then log the font like so:

console.log(hcanvas_prev_3.font)

It prints out that the font is active see screenshot:

I've been looking around to see how to fix it, and I've tried a lot of different options:

That this can also happen if you reset the size of the canvas. At least, I saw this in Chrome 23 today.

context.font = 'bold 20px arial';
canvas.width = 100;
canvas.height = 100;
console.log(context.font); // gives '10px sans-serif'

Referenced Here!

So, I've not fixed it just yet but I am working on it!