Canvas 使用会标字体的织物文本不'；不能在画布上正确渲染

我目前正在进行一个项目，我使用fabric js创建一个画布，向用户展示他们的首字母缩写在花押字样式图像中的效果。问题是画布无法正确渲染文本

呈现的文本如下所示：

但当我点击图像中的任何地方时，图像将被修复。应该是这样的：

我这样创建画布：

公共功能打印表单首字母（$首字母）{

if（$initials）{
$left_letter=strtolower（substr（$initials，0,1））；
$center_letter=strtoupper（substr（$initials，1,1））；
$right_letter=$this->substitute_circle_monog_third_char（substr（$initials，2，1））；
$val=$左字母。$中字母。$右字母；
}否则{
$val='rE4'；
}
$html=''；
$html.=''；
$html.='jQuery（window）.load（function（）{'；
$html.='var canvas=new fabric.canvas（“canvas”）；'；
$html.='var text=new fabric.text（“.$val.”，{”；
$html.='fontFamily:“圆形花押字”；
//$html.='fontSize:100'；
//$html.='可选：假'；
//$html.='top:3'；
//$html.='左：3'；
$html.='}）；'；
$html.='canvas.add（text）；'；
$html.='}'）；
$html.=''；
//输出html
返回$html；
}

---

我使用字体面属性加载字体。我做错了什么？

问题是，在创建画布时，字体尚未加载。 使用带有回调的字体加载器，或使用延迟技术在1秒或2秒后再次渲染画布

    if($initials) {
        $left_letter    = strtolower(substr($initials, 0, 1));
        $center_letter  = strtoupper(substr($initials, 1, 1));
        $right_letter   =  $this->substitute_circle_monog_third_char(substr($initials, 2, 1));
        $val = $left_letter . $center_letter . $right_letter;
    } else {
        $val = 'rE4';
    }

    $html =     '<canvas id="canvas" width="130" height="130"></canvas>';
    $html .=    '<script type="text/javascript">';
    $html .=    'jQuery(window).load(function(){';
    $html .=    'var canvas = new fabric.Canvas("canvas");';
    $html .=    'var text = new fabric.Text("' . $val . '", {';
    $html .=    'fontFamily     : "circle-monogram",';
    // $html .= 'fontSize    : 100,';
    // $html .= 'selectable     : false,';
    // $html .= 'top        : 3,';
    // $html .= 'left       : 3';
    $html .=    '});';
    $html .=    'canvas.add(text);';
    $html .=    '})';
    $html .=    '</script>';

    // output the html

    return $html;
}