more performance fixes

src/Context.ts

@@ -261,7 +261,7 @@ export class Context {
     }
   }
   _applyLineJoin(shape: Shape) {
-    var lineJoin = shape.lineJoin();
+    var lineJoin = shape.attrs.lineJoin;
     if (lineJoin) {
       this.setAttr('lineJoin', lineJoin);
     }

src/Node.ts

@@ -1732,7 +1732,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       if (transformsEnabled === 'all') {
         at.multiply(this.getTransform());
       } else if (transformsEnabled === 'position') {
-        at.translate(this.x() - this.offsetX(), this.y() - this.offsetY());
+        // use "attrs" directly, because it is a bit faster
+        const x = this.attrs.x || 0;
+        const y = this.attrs.y || 0;
+        const offsetX = this.attrs.offsetX || 0;
+        const offsetY = this.attrs.offsetY || 0;
+
+        at.translate(x - offsetX, y - offsetY);
       }
       at.dirty = false;
       return at;
@@ -1808,12 +1814,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     var x = this.x(),
       y = this.y(),
       rotation = Konva.getAngle(this.rotation()),
-      scaleX = this.scaleX(),
-      scaleY = this.scaleY(),
-      skewX = this.skewX(),
-      skewY = this.skewY(),
-      offsetX = this.offsetX(),
-      offsetY = this.offsetY();
+      scaleX = this.attrs.scaleX ?? 1,
+      scaleY = this.attrs.scaleY ?? 1,
+      skewX = this.attrs.skewX || 0,
+      skewY = this.attrs.skewY || 0,
+      offsetX = this.attrs.offsetX || 0,
+      offsetY = this.attrs.offsetY || 0;
 
     if (x !== 0 || y !== 0) {
       m.translate(x, y);

src/Shape.ts

@@ -463,7 +463,8 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
       return false;
     }
     // force skip buffer canvas
-    if (!this.perfectDrawEnabled()) {
+    const perfectDrawEnabled = this.attrs.perfectDrawEnabled ?? true;
+    if (!perfectDrawEnabled) {
       return false;
     }
     const hasFill = forceFill || this.hasFill();
@@ -579,9 +580,8 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
       canvas = can || layer.getCanvas(),
       context = canvas.getContext() as SceneContext,
       cachedCanvas = this._getCanvasCache(),
-      drawFunc = this.sceneFunc(),
+      drawFunc = this.getSceneFunc(),
       hasShadow = this.hasShadow(),
-      hasStroke = this.hasStroke(),
       stage,
       bufferCanvas,
       bufferContext;

src/shapes/Image.ts

@@ -39,16 +39,16 @@ export class Image extends Shape<ImageConfig> {
     return super._useBufferCanvas(true);
   }
   _sceneFunc(context) {
-    var width = this.width(),
-      height = this.height(),
-      image = this.image(),
+    var width = this.getWidth(),
+      height = this.getHeight(),
+      image = this.attrs.image,
       cropWidth,
       cropHeight,
       params;
 
     if (image) {
-      cropWidth = this.cropWidth();
-      cropHeight = this.cropHeight();
+      cropWidth = this.attrs.cropWidth;
+      cropHeight = this.attrs.cropHeight;
       if (cropWidth && cropHeight) {
         params = [
           image,
@@ -87,12 +87,10 @@ export class Image extends Shape<ImageConfig> {
     context.fillStrokeShape(this);
   }
   getWidth() {
-    var image = this.image();
-    return this.attrs.width ?? (image ? image.width : 0);
+    return this.attrs.width ?? (this.image()?.width || 0);
   }
   getHeight() {
-    var image = this.image();
-    return this.attrs.height ?? (image ? image.height : 0);
+    return this.attrs.height ?? (this.image()?.height || 0);
   }
 
   /**

test/performance/bunnies.html

@@ -93,6 +93,8 @@
             x: 10,
             y: 10,
             perfectDrawEnabled: false,
+            width: wabbitTexture.width,
+            height: wabbitTexture.height,
           });
 
           bunny.speedX = Math.random() * 10;
@@ -101,7 +103,22 @@
           bunnys.push(bunny);
           layer.add(bunny);
         }
-        layer.draw();
+        // layer.draw();
+        // console.clear();
+        // bunnys.forEach((b) => {
+        //   b.position({
+        //     x: Math.random() * window.innerWidth,
+        //     y: Math.random() * window.innerHeight,
+        //   });
+        // });
+        // layer.draw();
+        // bunnys.forEach((b) => {
+        //   b.position({
+        //     x: Math.random() * window.innerWidth,
+        //     y: Math.random() * window.innerHeight,
+        //   });
+        // });
+        // layer.draw();
       }
 
       function onTouchStart(event) {
@@ -124,6 +141,8 @@
               x: 0,
               y: 0,
               perfectDrawEnabled: false,
+              width: wabbitTexture.width,
+              height: wabbitTexture.height,
             });
             bunny.speedX = Math.random() * 10;
             bunny.speedY = Math.random() * 10 - 5;