Canvas images are displayed large

[K-Massy]

Thank you for helping.

I implemented the code with reference to the official documentation,

img_url = $('#imag_thumb').children('img').attr('src');  // get image url

var el = document.getElementById('img-crop');
var resize = new Croppie(el, {
    viewport: { width: 100, height: 100 },
    boundary: { width: 300, height: 300 },
    showZoomer: false,
    enableResize: true,
    enableOrientation: true,
    mouseWheelZoom: 'ctrl'
});
resize.bind({
    url: img_url,
});

The image size displayed on canvas is not adjusted like in the official demo, and is displayed at the same image size.

How can I adjust the image size like in the official demo?

[gabyokal]

Hi! Were you able to solve the problem?

[JorensM]

Make sure your page has <script/> tags for jQuery and croppie.js