I have a script that crops an image from the video stream.

    let ctx = image.getContext("2d");
    ctx.drawImage(results.image, croprect.x, croprect.y, croprectwidth, croprectheight, 0, 0, 300, 200);

In HTML

      <div id="image-div">
            <canvas id="image" width="300" height="200"></canvas>                
      </div> 

Now I need to do some image processing manipulation with it. I do 'Save as' for the test but how to do it automatically?

I tried

    const canvas = document.getElementById('image');
    const dataURL = canvas.toDataURL();
    console.log(dataURL); 

In the console, it gives an URL but when I open it, it is just a blank (white) rectangle (correct size 300x200) I want to save it to my local folder and to the backend later when the second step (image processing) of the script will work.