Only extract the image data once in the clipping case.

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>

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;