0
141
VistasWhile Drawing svg on canvas font is not getting applied on the canvas preview
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&family=PT+Sans&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
1 Respuestas
Responde la pregunta0
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'
So, I've not fixed it just yet but I am working on it!