From ac6de95024201589fb852b13257ee47384be4b98 Mon Sep 17 00:00:00 2001
From: Anton Lavrenov <lavrton@gmail.com>
Date: Wed, 5 Apr 2023 20:47:00 -0600
Subject: [PATCH] resolve chrome warning. close #1417

---
 src/Canvas.ts     |  9 +++++++--
 src/Context.ts    |  6 ++++--
 src/Node.ts       |  1 +
 test/sandbox.html | 45 ++++++---------------------------------------
 4 files changed, 18 insertions(+), 43 deletions(-)

diff --git a/src/Canvas.ts b/src/Canvas.ts
index 5aab2d1a..ef178437 100644
--- a/src/Canvas.ts
+++ b/src/Canvas.ts
@@ -31,6 +31,7 @@ interface ICanvasConfig {
   width?: number;
   height?: number;
   pixelRatio?: number;
+  willReadFrequently?: boolean;
 }
 
 /**
@@ -170,9 +171,13 @@ export class Canvas {
 Factory.addGetterSetter(Canvas, 'pixelRatio', undefined, getNumberValidator());
 
 export class SceneCanvas extends Canvas {
-  constructor(config: ICanvasConfig = { width: 0, height: 0 }) {
+  constructor(
+    config: ICanvasConfig = { width: 0, height: 0, willReadFrequently: false }
+  ) {
     super(config);
-    this.context = new SceneContext(this);
+    this.context = new SceneContext(this, {
+      willReadFrequently: config.willReadFrequently,
+    });
     this.setSize(config.width, config.height);
   }
 }
diff --git a/src/Context.ts b/src/Context.ts
index 723c738d..54b4687e 100644
--- a/src/Context.ts
+++ b/src/Context.ts
@@ -766,9 +766,11 @@ CONTEXT_PROPERTIES.forEach(function (prop) {
 });
 
 export class SceneContext extends Context {
-  constructor(canvas: Canvas) {
+  constructor(canvas: Canvas, { willReadFrequently = false } = {}) {
     super(canvas);
-    this._context = canvas._canvas.getContext('2d') as CanvasRenderingContext2D;
+    this._context = canvas._canvas.getContext('2d', {
+      willReadFrequently,
+    }) as CanvasRenderingContext2D;
   }
   _fillColor(shape: Shape) {
     var fill = shape.fill();
diff --git a/src/Node.ts b/src/Node.ts
index a1bc5438..db4abc5d 100644
--- a/src/Node.ts
+++ b/src/Node.ts
@@ -368,6 +368,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
         pixelRatio: pixelRatio,
         width: 0,
         height: 0,
+        willReadFrequently: true,
       }),
       cachedHitCanvas = new HitCanvas({
         pixelRatio: hitCanvasPixelRatio,
diff --git a/test/sandbox.html b/test/sandbox.html
index a136b90e..8214cfbf 100644
--- a/test/sandbox.html
+++ b/test/sandbox.html
@@ -43,47 +43,14 @@
         width: 100,
         height: 100,
         fill: 'red',
+        filters: [Konva.Filters.Blur],
+        blurRadius: 10,
       });
       layer.add(rect);
-      stage.on('wheel', (e) => {
-        e.evt.preventDefault();
-        console.log('wheel');
-      });
-      stage.on('contextmenu', (e) => {
-        console.log('click');
-      });
-
-      var imageObj = new Image();
-      imageObj.onload = function () {
-        var yoda = new Konva.Image({
-          x: 150,
-          y: 50,
-          image: imageObj,
-          width: 200,
-          height: 200,
-          draggable: true,
-          strokeWidth: 4,
-          stroke: 'blue',
-          cornerRadius: [10, 20, 30, 40],
-        });
-        layer.add(yoda);
-      };
-      imageObj.src = 'https://konvajs.org/assets/yoda.jpg';
-
-      Konva.Image.fromURL('https://konvajs.org/assets/darth-vader.jpg', function (darthNode) {
-        darthNode.setAttrs({
-          x: 300,
-          y: 50,
-          // scaleX: 0.5,
-          // scaleY: 0.5,
-          draggable: true,
-          strokeEnabled: true,
-          stroke: 'green',
-          strokeWidth: 2,
-          cornerRadius: 30,
-        });
-        layer.add(darthNode);
-      });
+      rect.cache();
+      setInterval(() => {
+        rect.blurRadius(rect.blurRadius() + 1);
+      }, 100);
     </script>
   </body>
 </html>