getImageData on canvas after translation and rotation

Question

I'm trying to extract a part of an image through the getImageData function for canvas.

The difficulty is that my part is rotated. My goal is to extract for example the rectangle on the image :

To draw the rectangle below, I use a translation and a rotation, but these functions don't work when we use getImageData.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, img.width, img.height);
  drawRect();
}
img.src = "https://dummyimage.com/300x150/5873f0/ffffff.jpg";


function drawRect() {
  ctx.save();
  ctx.translate(75, 100);
  ctx.rotate(20 * Math.PI / 180)
  // imgData = ctx.getImageData(-50, -25, 100, 50);
  ctx.strokeStyle = 'black';
  ctx.strokeRect(-50, -25, 100, 50);
  ctx.restore()
}

<canvas id="myCanvas" width="300" height="150">
Your browser does not support the HTML5 canvas tag.</canvas>

This is the Fiddle I use. Thanks!