feat(feedback): Improve screenshot quality for retina displays (#12487)

Improves screenshot quality after cropping for retina displays. This
increases resolution after cropping by factoring in DPI.
Before:
<img width="974" alt="image"
src="https://github.com/getsentry/sentry-javascript/assets/55311782/e39397ae-8c6c-47a6-8d10-260c16eb8234">

After:
<img width="974" alt="image"
src="https://github.com/getsentry/sentry-javascript/assets/55311782/bd05b88b-3d2f-4193-b55b-75aae0bba8b9">

The size is the same when cropping but when viewing feedbacks,
screenshots from retina displays are twice as large due to higher DPI.

Closes #12329

---------

Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>

Author: c298lee

packages/feedback/src/screenshot/components/ScreenshotEditor.tsx

@@ -187,8 +187,8 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
       const cutoutCanvas = DOCUMENT.createElement('canvas');
       const imageBox = constructRect(getContainedSize(imageBuffer));
       const croppingBox = constructRect(croppingRect);
-      cutoutCanvas.width = croppingBox.width;
-      cutoutCanvas.height = croppingBox.height;
+      cutoutCanvas.width = croppingBox.width * DPI;
+      cutoutCanvas.height = croppingBox.height * DPI;
 
       const cutoutCtx = cutoutCanvas.getContext('2d');
       if (cutoutCtx && imageBuffer) {
@@ -200,8 +200,8 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
           (croppingBox.height / imageBox.height) * imageBuffer.height,
           0,
           0,
-          croppingBox.width,
-          croppingBox.height,
+          cutoutCanvas.width,
+          cutoutCanvas.height,
         );
       }
 
@@ -210,8 +210,8 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
         ctx.clearRect(0, 0, imageBuffer.width, imageBuffer.height);
         imageBuffer.width = cutoutCanvas.width;
         imageBuffer.height = cutoutCanvas.height;
-        imageBuffer.style.width = `${cutoutCanvas.width}px`;
-        imageBuffer.style.height = `${cutoutCanvas.height}px`;
+        imageBuffer.style.width = `${croppingBox.width}px`;
+        imageBuffer.style.height = `${croppingBox.height}px`;
         ctx.drawImage(cutoutCanvas, 0, 0);
         resizeCropper();
       }