diff --git a/components/canvas/canvas_paint_thread.rs b/components/canvas/canvas_paint_thread.rs
index 87ebcdf5cfc..8aca22bdbfb 100644
--- a/components/canvas/canvas_paint_thread.rs
+++ b/components/canvas/canvas_paint_thread.rs
@@ -746,7 +746,7 @@ fn crop_image(image_data: Vec<u8>,
     // (consecutive elements in a pixel row of the image are contiguous in memory)
     let stride = image_size.width * 4;
     let image_bytes_length = image_size.height * image_size.width * 4;
-    let crop_area_bytes_length = crop_rect.size.height * crop_rect.size.height * 4;
+    let crop_area_bytes_length = crop_rect.size.height * crop_rect.size.width * 4;
     // If the image size is less or equal than the crop area we do nothing
     if image_bytes_length <= crop_area_bytes_length {
         return image_data;
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index dddb770c796..760a3f00a0b 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -6033,6 +6033,30 @@
      {}
     ]
    ],
+   "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html": [
+    [
+     "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html",
+     [
+      [
+       "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html": [
+    [
+     "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html",
+     [
+      [
+       "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html": [
     [
      "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html",
@@ -12845,6 +12869,16 @@
      {}
     ]
    ],
+   "2dcontext/2x4.png": [
+    [
+     {}
+    ]
+   ],
+   "2dcontext/4x2.png": [
+    [
+     {}
+    ]
+   ],
    "2dcontext/best-practices/.gitkeep": [
     [
      {}
@@ -13295,6 +13329,16 @@
      {}
     ]
    ],
+   "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html": [
+    [
+     {}
+    ]
+   ],
+   "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html": [
+    [
+     {}
+    ]
+   ],
    "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html": [
     [
      {}
@@ -129763,6 +129807,14 @@
    "c67d3f646e86413722833d2308a9bfc793a916bf",
    "support"
   ],
+  "2dcontext/2x4.png": [
+   "690bac789fecf2530b36dd889c68db3bd93ed9fd",
+   "support"
+  ],
+  "2dcontext/4x2.png": [
+   "16f72935aaf97175593bcf27794506f0884f091b",
+   "support"
+  ],
   "2dcontext/best-practices/.gitkeep": [
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",
    "support"
@@ -130735,6 +130787,22 @@
    "30150e3530438d42704fda8b3623286658f6c724",
    "support"
   ],
+  "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html": [
+   "fa83293cfbdbb67a9d5d27a20ac19ff5d9c46d07",
+   "reftest"
+  ],
+  "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html": [
+   "0feedb34e5ade7a4e58cb4eb92e2b958a06929fe",
+   "support"
+  ],
+  "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html": [
+   "b37463cc33b46e9aba5bbe73244fd422ef38406e",
+   "reftest"
+  ],
+  "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html": [
+   "d6817ddb2ac78b524f7cc80ebd4f348aded4d89f",
+   "support"
+  ],
   "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html": [
    "9a70c803aaf5bd8a843b18d6d16779575d4dc6f8",
    "support"
diff --git a/tests/wpt/web-platform-tests/2dcontext/2x4.png b/tests/wpt/web-platform-tests/2dcontext/2x4.png
new file mode 100644
index 00000000000..f5589a73184
Binary files /dev/null and b/tests/wpt/web-platform-tests/2dcontext/2x4.png differ
diff --git a/tests/wpt/web-platform-tests/2dcontext/4x2.png b/tests/wpt/web-platform-tests/2dcontext/4x2.png
new file mode 100644
index 00000000000..4a8d81e7c22
Binary files /dev/null and b/tests/wpt/web-platform-tests/2dcontext/4x2.png differ
diff --git a/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html
new file mode 100644
index 00000000000..0a28aa46283
--- /dev/null
+++ b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Canvas test: 2d.drawImage.crop.2x4</title>
+<link rel="match" href="drawimage_html_image_14_ref.html">
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 256;
+var sourceHeight = 512;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x4.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+sourceImg.onload = function() {
+  var destCtx = destCanvas.getContext('2d');
+  destCtx.fillStyle = "#FF0000";
+  destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+  destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+  destCtx.drawImage(sourceImg, 64, 64, 192, 448, 0, 0, 30, 70);
+  document.documentElement.classList.remove('reftest-wait');
+}
+
+</script>
diff --git a/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html
new file mode 100644
index 00000000000..f682f87cc6f
--- /dev/null
+++ b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    background-image: url("../2x4.png");
+    background-position: -10px -10px;
+    background-size: 40px 80px;
+    background-repeat: no-repeat;
+  }
+
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html
new file mode 100644
index 00000000000..507ff31eb9d
--- /dev/null
+++ b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Canvas test: 2d.drawImage.crop.4x2</title>
+<link rel="match" href="drawimage_html_image_15_ref.html">
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 512;
+var sourceHeight = 256;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../4x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+sourceImg.onload = function() {
+  var destCtx = destCanvas.getContext('2d');
+  destCtx.fillStyle = "#FF0000";
+  destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+  destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+  destCtx.drawImage(sourceImg, 64, 64, 448, 192, 0, 0, 70, 30);
+  document.documentElement.classList.remove('reftest-wait');
+}
+
+</script>
diff --git a/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html
new file mode 100644
index 00000000000..a7abc3cb28a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    background-image: url("../4x2.png");
+    background-position: -10px -10px;
+    background-size: 80px 40px;
+    background-repeat: no-repeat;
+  }
+
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>