Слово хинди не берется при рендеринге HTML

Question

Когда я пытаюсь отобразить слово хинди с помощью html на холсте, я вижу несколько слов в слове, как показано на картинках ниже.

https://ibb.co/MVctvRh

Вот мой код холста jquery

html2canvas(document.querySelector(".card-content-img")).then(canvas => {
   document.body.appendChild(canvas);
   $(canvas).attr('id', 'canvas-fab').css('display', 'none');

   var img = canvas.toDataURL({
       format: 'jpeg'
   })

});

И ниже моего HTML-кода

<div class="card-content-img card-content-img">
    <div class="quote-img ">
        <img src="upload/image.jpeg" alt="">
    </div>
    <div class="over-text">
        <div class="user-text">
            <p class="center-text">
                 हिंदी शब्द
            </p>
        </div>
    </div>
</div>

Как я могу напечатать правильное слово хинди в изображении? Есть ли проблемы с рендерингом холста?