HTML часть не правильно отображается на холсте с помощью функции html2canvas?

Сначала я конвертирую квадратное изображение в круг через код ниже.

HTML
<div id="output_image" style="float:right; margin-bottom:6px; margin-right:6px;"><img id="imgdis" class="type3" src="components/com_jumi/files/imagesupload/Chrysanthemum.jpg"></div>

CSS
.type3 {
width: 187px;
height: 187px;
margin-top: 40px;
margin-right: 46px;
position: relative;
border-radius: 93px;
overflow: hidden;
}

Формат изображения успешно изменен. Но когда я отрисовываю эти части на холсте, он не рендерит, а отображает квадратное изображение, но я хочу отобразить круговое изображение.
Смотрите ниже пример.

Оранжевое изображение — это загруженное изображение. Формат изображения — Круг

После выполнения функции html2canvas ее отображение в квадрате вместо круга.