How to pull cropped image from Canvas?

Question

Canvas

In general, there is an image that I cropped using Canvas and I insert the resulting image on the page, but the problem is that not only the image itself flies to the page, but also the canvas along with it, which causes difficulties in resizing the image (I want to stretch 100% in the ancestor block, but the size changes the canvas and the picture remains small and the canvas stretches).
Here is the code:

function cutImage(imageObj, coordinates) {
    var canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    const sourceX = coordinates["originCoordinates"][0] * imageWidth;
    const sourceY = coordinates["boxTop"];
    const sourceWidth = coordinates["boxWidth"];
    const sourceHeight = coordinates["boxHeight"];
    const destWidth = sourceWidth;
    const destHeight = sourceHeight;
    var destX = canvas.width / 2 - destWidth / 2;
    var destY = canvas.height / 2 - destHeight / 2;

    context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

    return canvas.toDataURL();
  }

In general, is it possible to somehow pull the picture out of the canvas and insert only it, or how to stretch the picture to the entire canvas? Thank you.

Answer 1

Dmitry, you do not set the dimensions of the created canvas after creation
canvas.setAttribute('width', ....);
canvas.setAttribute('height', ....);
Write here the dimensions of the resulting image
And draw the image on the canvas from the point 0:0