diff --git a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js b/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
index d3130a9e73427e71b5dcd26198575a53dea8dafd..f7728da043dff8ba3fd1828cdf4ea3eebf78bd0f 100644
--- a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
+++ b/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
@@ -49,7 +49,7 @@ class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
                 <div class="container">
                     <div class="columns is-centered">
                         <div class="column">
-                            <dbp-qr-code-scanner lang="${this.lang}"></dbp-qr-code-scanner>
+                            <dbp-qr-code-scanner clip-mask lang="${this.lang}"></dbp-qr-code-scanner>
                         </div>
                     </div>
                 </div>
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 698f772d42a8066964b0204fe962011227ab85b3..e58f4a8ee2629a342c91bf21ad6c26976fcbb1d5 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -263,8 +263,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                 let maskHeight = 0;
                 let maskStartX = canvasElement.width;
                 let maskStartY = canvasElement.height;
-
-                let imageData = canvas.getImageData(0 , 0, canvasElement.width, canvasElement.height);
+                let imageData;
 
                 if (that.clipMask) {
                     //draw mask
@@ -302,6 +301,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                     canvas.fill();
 
                     imageData = canvas.getImageData(maskStartX , maskStartY, maskWidth, maskHeight);
+                } else {
+                    imageData = canvas.getImageData(0 , 0, canvasElement.width, canvasElement.height);
                 }
 
                 let code = null;