resolve chrome warning. close #1417

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);
   }
 }

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();

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,

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>