Cropper zoom out with negative coordinates results in wrong canvas draw

[JOMI195]

Hello guys,

in addition to a fixed cropper with imageRestriction={ImageRestriction.none}, I implemented a custom zoom slider to also zoom out of the image to create a black padding around it. When I use the cropper.getCanvas() function to save this image, the image gets moved because of negative coordinates. I provided 2 images at the bottom.

I looked up your implementation of the advanced-cropper canvas and saw that it gets cutted out. Is there a function, method, workaround to get save image like in the cropper preview?

function updateCanvas(canvas, source, coordinates, resultSize, options) {
    canvas.width = resultSize ? resultSize.width : coordinates.width;
    canvas.height = resultSize ? resultSize.height : coordinates.height;
    var ctx = canvas.getContext('2d');
    if (ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (options) {
            if (options.imageSmoothingEnabled) {
                ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
            }
            if (options.imageSmoothingQuality) {
                ctx.imageSmoothingQuality = options.imageSmoothingQuality;
            }
            if (options.fillColor) {
                ctx.fillStyle = options.fillColor;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.save();
            }
        }
        var offsetX = coordinates.left < 0 ? -coordinates.left : 0;
        var offsetY = coordinates.top < 0 ? -coordinates.top : 0;
        ctx.drawImage(source, coordinates.left + offsetX, coordinates.top + offsetY, coordinates.width, coordinates.height, offsetX * (canvas.width / coordinates.width), offsetY * (canvas.height / coordinates.height), canvas.width, canvas.height);
    }
    return canvas;
}

Code: Implementation of advanced cropper.

Image1: Cropper preview with ability to zoom out of image bounds

Image2: Resulting image on save