https://jsfiddle.net/headwinds/ykx7kp8L/
img.onload = function(){
ctx.drawImage( img,0,0,200,200 );
}
img.src = SVGAsDataURLWithEmbeddedFont
If you look at this snippet on Chrome or FireFox it transfers the image to the canvas properly, however, on Safari, on the first load the canvas does not render the text.
If you add a timeout inside the onload function, it does work:
img.onload = function(){
setTimeout(() => ctx.drawImage( img,0,0,200,200 ), 100);
}
https://jsfiddle.net/8mon35tx/
Unfortunately this is not a viable solution for me because the redraw is called often and the 100ms delay would cause visible lag and is too arbitrary.
Anyone would know of another surefire way to ensure the image is properly loaded when onload is called?