Canvas getImageData not getting the target area

Question

I cannot seem to to copy image data from a specific area on a canvas.

I can paint a rectangle around the area but when I use getImageData it caputures a different area.

I am trying to capture the grey box labelled click using

let sweepImgData = ctx.getImageData(300,250 ,100, 20);

But when I then use:

ctx.putImageData(sweepImgData, 75, 75);

It shows a blank box.

Can anyone please put me out of my misery?

https://jsfiddle.net/piersheriotwalker/67eLvg1t/53/

   var ctx = document.getElementById("canv").getContext("2d");
    
    let sweepImgData = ctx.getImageData(300,250 ,100, 20);

    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0 , ctx.canvas.width, ctx.canvas.height);

    ctx.putImageData(sweepImgData, 75, 75);