JS Обрезать и скачать изображение на ПК

Есть код, который обрезает часть изображения и отображает оставшееся в браузере. Но если сохранить изображение из браузера на ПК, оказывается, что оно не обрезано полноценно, а за пределами видимой, обрезанной части осталась прозрачная часть площади (в клетку).

Как получить полноценно обрезанное изображение, без лишней площади?

И как его автоматически сохранить на ПК из браузера?

<canvas id="canvas"></canvas>
    <div style="display:none;">
        <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
    </div>

    <input type="file" id="myfile">

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
image = document.getElementById("source");
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

function readURL() {
    var input = document.getElementById("myfile");
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
        drawimg(e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

document.querySelector('#myfile').addEventListener('change', function() {
    readURL()
});

function drawimg(idata) {
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);
    };
    img.src = idata;
}