feat: ✨ The Image adds rounded corner support

test/sandbox.html

@@ -52,6 +52,38 @@
       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);
+      });
     </script>
   </body>
 </html>

test/unit/Image-test.ts

@@ -26,6 +26,7 @@ describe('Image', function () {
         offset: { x: 50, y: 30 },
         crop: { x: 135, y: 7, width: 167, height: 134 },
         draggable: true,
+        cornerRadius: 15,
       });
 
       layer.add(darth);
@@ -43,9 +44,9 @@ describe('Image', function () {
       assert.equal(darth.getHeight(), 100);
       assert.equal(darth.offset().x, 50);
       assert.equal(darth.offset().y, 30);
+      assert.equal(darth.cornerRadius(), 15);
 
-      var crop = null;
-      crop = darth.crop();
+      var crop = darth.crop();
 
       assert.equal(crop.x, 135);
       assert.equal(crop.y, 7);