refactor: remove custom typescript settings for tests

src/types.ts

@@ -49,7 +49,7 @@ export interface IFrame {
   frameRate: number;
 }
 
-export type AnimationFn = (frame?: IFrame) => boolean | void;
+export type AnimationFn = (frame: IFrame) => boolean | void;
 
 export enum KonvaNodeEvent {
   mouseover = 'mouseover',

test/manual/Manual-test.ts

@@ -352,7 +352,7 @@ describe('Manual', function () {
         document.body.style.cursor = 'default';
       });
 
-      Konva.pixelRatio = undefined;
+      Konva.pixelRatio = 1;
       done();
     };
     imageObj.src = 'assets/lion.png';

test/unit/Arc-test.ts

@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
   addStage,
   Konva,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
   assertAlmostDeepEqual,
 } from './test-utils.ts';
@@ -189,8 +189,7 @@ describe('Arc', function () {
     layer.add(arc);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.arc(100, 100, 80, 0, Math.PI / 2, false);
     context.arc(100, 100, 50, Math.PI / 2, 0, true);

test/unit/Blob-test.ts

@@ -57,7 +57,7 @@ describe('Blob', function () {
     layer.add(blob);
     stage.add(layer);
 
-    assert.equal(stage.findOne<Line>('Line').points().length, 8);
+    assert.equal(stage.findOne<Line>('Line')?.points().length, 8);
   });
 
   // ======================================================

test/unit/Circle-test.ts

@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
   addStage,
   Konva,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
   loadImage,
 } from './test-utils.ts';
@@ -159,8 +159,7 @@ describe('Circle', function () {
     layer.add(group);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context: ctx } = createCanvasAndContext();
-    var ctx = canvas.getContext('2d');
 
     var start = { x: -35, y: -35 };
     var end = { x: 35, y: 35 };
@@ -306,8 +305,7 @@ describe('Circle', function () {
     layer.add(circle);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.arc(100, 100, 50, 0, Math.PI * 2, false);
     context.closePath();

test/unit/DragAndDropEvents-test.ts

@@ -47,7 +47,7 @@ describe('DragAndDropEvents', function () {
     var dragStart = false;
     var dragMove = false;
     var dragEnd = false;
-    var events = [];
+    var events: string[] = [];
 
     circle.on('dragstart', function () {
       dragStart = true;

test/unit/Ellipse-test.ts

@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
   addStage,
   Konva,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
 } from './test-utils.ts';
 
@@ -99,8 +99,7 @@ describe('Ellipse', function () {
     layer.add(ellipse);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.save();
     context.beginPath();
     context.scale(1, 0.5);

test/unit/Group-test.ts

@@ -38,7 +38,7 @@ describe('Group', function () {
         y: -15,
         width: 150,
         height: 150,
-      })
+      })!
       .offsetX(5)
       .offsetY(5);
 

test/unit/Image-test.ts

@@ -3,11 +3,11 @@ import { assert } from 'chai';
 import {
   addStage,
   Konva,
-  createCanvas,
   compareLayerAndCanvas,
   loadImage,
   isNode,
   isBrowser,
+  createCanvasAndContext,
 } from './test-utils.ts';
 
 describe('Image', function () {
@@ -305,8 +305,7 @@ describe('Image', function () {
         height: 100,
       });
 
-      var canvas = createCanvas();
+      const { canvas, context } = createCanvasAndContext();
-      var context = canvas.getContext('2d');
       context.drawImage(imageObj, 200, 60, 100, 100);
       compareLayerAndCanvas(layer, canvas, 10);
       done();
@@ -341,9 +340,13 @@ describe('Image', function () {
     var layer = new Konva.Layer();
     stage.add(layer);
     var src = 'non-existent.jpg';
-    Konva.Image.fromURL(src, null, function (e) {
+    Konva.Image.fromURL(
+      src,
+      () => {},
+      function (e) {
         done();
-    });
+      }
+    );
   });
 
   it('check zero values', function (done) {

test/unit/Layer-test.ts

@@ -225,12 +225,12 @@ describe('Layer', function () {
     stage.add(layer);
 
     assert.equal(
-      layer.getIntersection({ x: 300, y: 100 }).id(),
+      layer.getIntersection({ x: 300, y: 100 })?.id(),
       'greenCircle',
       'shape should be greenCircle'
     );
     assert.equal(
-      layer.getIntersection({ x: 380, y: 100 }).id(),
+      layer.getIntersection({ x: 380, y: 100 })?.id(),
       'redCircle',
       'shape should be redCircle'
     );

test/unit/Line-test.ts

@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
   addStage,
   Konva,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
   compareLayers,
 } from './test-utils.ts';
@@ -147,8 +147,7 @@ describe('Line', function () {
     layer.add(line);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     context.save();
     context.lineJoin = 'round';

test/unit/MouseEvents-test.ts

@@ -1550,7 +1550,7 @@ describe('MouseEvents', function () {
     stage.add(layer);
 
     // events array
-    var e = [];
+    var e: string[] = [];
 
     circle.on('click', function () {
       e.push('circle');

test/unit/Node-cache-test.ts

@@ -5,7 +5,7 @@ import {
   compareLayerAndCanvas,
   cloneAndCompareLayer,
   compareCanvases,
-  createCanvas,
+  createCanvasAndContext,
   loadImage,
   getPixelRatio,
 } from './test-utils.ts';
@@ -29,8 +29,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 50);
     context.closePath();
@@ -60,8 +59,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.translate(100, 50);
     context.rotate(Math.PI / 4);
     context.beginPath();
@@ -93,8 +91,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 50);
     context.closePath();
@@ -125,8 +122,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.3;
     context.beginPath();
     context.rect(100, 50, 100, 50);
@@ -209,8 +205,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 50);
     context.closePath();
@@ -244,8 +239,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     context.translate(100, 50);
     context.beginPath();
@@ -281,8 +275,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     context.translate(100, 50);
     context.beginPath();
@@ -346,8 +339,7 @@ describe('Caching', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     context.translate(50, 25);
     context.beginPath();
@@ -384,8 +376,7 @@ describe('Caching', function () {
     layer.add(group);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 50);
     context.closePath();
@@ -461,8 +452,7 @@ describe('Caching', function () {
     layer.add(group);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     // draw rect
     context.save();
@@ -574,8 +564,7 @@ describe('Caching', function () {
     layer.add(group);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     // draw rect
     context.save();
@@ -630,8 +619,7 @@ describe('Caching', function () {
 
     assert.equal(circle._getCanvasCache(), undefined);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     // circle
     context.save();
     context.beginPath();
@@ -858,8 +846,7 @@ describe('Caching', function () {
     group.cache();
     layer.draw();
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.5;
     context.beginPath();
     context.rect(100, 50, 100, 50);
@@ -891,8 +878,7 @@ describe('Caching', function () {
     layer.visible(true);
     layer.draw();
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 100);
     context.closePath();
@@ -960,8 +946,7 @@ describe('Caching', function () {
     layer.listening(true);
     layer.draw();
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 100);
     context.closePath();
@@ -999,8 +984,7 @@ describe('Caching', function () {
     layer.visible(true);
     layer.draw();
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.5;
     context.beginPath();
     context.rect(100, 50, 100, 100);
@@ -1535,8 +1519,7 @@ describe('Caching', function () {
     assert.equal(hitCanvas._canvas.height, rect.height() * 0.2);
     assert.equal(hitCanvas.pixelRatio, 0.2);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 100);
     context.closePath();

test/unit/Node-test.ts

@@ -637,7 +637,7 @@ describe('Node', function () {
       id: 'myRect',
     });
 
-    var clicks = [];
+    var clicks: string[] = [];
 
     rect.on('click', function () {
       clicks.push(this.name());
@@ -719,8 +719,8 @@ describe('Node', function () {
     group.add(rect);
     group.add(text);
 
-    var clicks = [];
+    var clicks: string[] = [];
-    var taps = [];
+    var taps: string[] = [];
 
     group.on('click', function () {
       clicks.push(this.name());
@@ -1883,7 +1883,7 @@ describe('Node', function () {
     layer.add(circle);
     layer.draw();
 
-    var clicks = [];
+    var clicks: string[] = [];
 
     circle.on('click', function () {
       clicks.push('circle');
@@ -2057,7 +2057,7 @@ describe('Node', function () {
     layer.add(circle);
     layer.draw();
 
-    var clicks = [];
+    var clicks: string[] = [];
 
     circle.on('click', function () {
       clicks.push('circle');
@@ -2091,7 +2091,7 @@ describe('Node', function () {
     layer.add(circle);
     layer.draw();
 
-    var clicks = [];
+    var clicks: string[] = [];
 
     circle.on('click', function (e) {
       e.cancelBubble = true;
@@ -3318,7 +3318,7 @@ describe('Node', function () {
         width: 148,
         height: 148,
       })
-      .offset({
+      ?.offset({
         x: 74,
         y: 74,
       });
@@ -3834,7 +3834,7 @@ describe('Node', function () {
       y: 100,
     });
 
-    assert.equal(circle.getRelativePointerPosition().x, -50);
+    assert.equal(circle.getRelativePointerPosition()?.x, -50);
-    assert.equal(circle.getRelativePointerPosition().y, 0);
+    assert.equal(circle.getRelativePointerPosition()?.y, 0);
   });
 });

test/unit/Path-test.ts

@@ -6,7 +6,7 @@ import tiger from '../assets/tiger.ts';
 import {
   addStage,
   Konva,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
   cloneAndCompareLayer,
   isNode,
@@ -196,8 +196,7 @@ describe('Path', function () {
 
     assert.equal(path.dataArray[1].command, 'L');
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     // stroke
     context.beginPath();
     context.moveTo(200, 100);
@@ -1099,7 +1098,7 @@ describe('Path', function () {
       ) as SVGPathElement;
       SVGPath.setAttribute('d', data);
       for (var i = 0; i < path.getLength(); i += 1) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
         var circle = new Konva.Circle({
           x: p.x,
           y: p.y,
@@ -1119,9 +1118,9 @@ describe('Path', function () {
         );
       }
     } else {
-      var points = [];
+      var points: { x: number; y: number }[] = [];
       for (var i = 0; i < path.getLength(); i += 20) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
         points.push(p);
         var circle = new Konva.Circle({
           x: p.x,
@@ -1185,7 +1184,7 @@ describe('Path', function () {
       ) as SVGPathElement;
       SVGPath.setAttribute('d', data);
       for (var i = 0.001; i < path.getLength(); i += 1) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
         var circle = new Konva.Circle({
           x: p.x + path.x(),
           y: p.y + path.y(),
@@ -1222,7 +1221,7 @@ describe('Path', function () {
       ) as SVGPathElement;
       SVGPath.setAttribute('d', data);
       for (var i = 0; i < path.getLength(); i += 1) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
         var circle = new Konva.Circle({
           x: p.x,
           y: p.y,
@@ -1262,7 +1261,7 @@ describe('Path', function () {
       ) as SVGPathElement;
       SVGPath.setAttribute('d', data);
       for (var i = 0; i < path.getLength(); i += 10) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
         var circle = new Konva.Circle({
           x: p.x,
           y: p.y,
@@ -1282,9 +1281,9 @@ describe('Path', function () {
         );
       }
     } else {
-      var points = [];
+      var points: { x: number; y: number }[] = [];
       for (var i = 0; i < path.getLength(); i += 500) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
         points.push(p);
         var circle = new Konva.Circle({
           x: p.x,

test/unit/PointerEvents-test.ts

@@ -163,7 +163,6 @@ describe.skip('PointerEvents', function () {
       x: 289,
       y: 10,
       pointerId: 0,
-      preventDefault: function () {},
     });
 
     assert.equal(otherDownCount, 1, '6) otherDownCount should be 1');
@@ -176,7 +175,6 @@ describe.skip('PointerEvents', function () {
       x: 289,
       y: 100,
       pointerId: 1,
-      preventDefault: function () {},
     });
 
     assert.equal(otherDownCount, 1, '7) otherDownCount should be 1');
@@ -189,7 +187,6 @@ describe.skip('PointerEvents', function () {
       x: 289,
       y: 10,
       pointerId: 2,
-      preventDefault: function () {},
     });
 
     assert.equal(otherDownCount, 1, '8) otherDownCount should be 1');
@@ -209,15 +206,15 @@ describe.skip('PointerEvents', function () {
       assert(pointermove, '9) pointermove should be true');
 
       simulatePointerUp(stage, {
+        x: 290,
+        y: 10,
         pointerId: 1,
-        preventDefault: function () {},
       });
 
       simulatePointerDown(stage, {
         x: 289,
         y: 10,
         pointerId: 1,
-        preventDefault: function () {},
       });
 
       assert(otherDownCount === 2, '10) otherDownCount should be 1');

test/unit/Rect-test.ts

@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
   addStage,
   Konva,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
 } from './test-utils.ts';
 
@@ -120,8 +120,7 @@ describe('Rect', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(200, 100, 100, 50);
     context.fillStyle = 'blue';
@@ -149,8 +148,7 @@ describe('Rect', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(200, 100, 100, 50);
     context.lineWidth = 4;
@@ -175,8 +173,7 @@ describe('Rect', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(200, 100, 100, 50);
     context.lineWidth = 2;
@@ -202,8 +199,7 @@ describe('Rect', function () {
     stage.add(layer);
 
     // as corner radius is much bigger we should have circe in the result
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.arc(100, 100, 50, 0, Math.PI * 2);
     context.fillStyle = 'black';

test/unit/RegularPolygon-test.ts

@@ -5,7 +5,7 @@ import {
   Konva,
   cloneAndCompareLayer,
   assertAlmostEqual,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
 } from './test-utils.ts';
 
@@ -230,8 +230,7 @@ describe('RegularPolygon', function () {
     stage.add(layer);
 
     // corner radius creates perfect circle at 1/2 radius
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.arc(100, 100, resultCircleRadius, 0, Math.PI * 2);
     context.fillStyle = 'black';

test/unit/Shape-test.ts

@@ -5,7 +5,7 @@ import {
   simulateMouseDown,
   simulateMouseMove,
   simulateMouseUp,
-  createCanvas,
+  createCanvasAndContext,
   isBrowser,
   isNode,
   compareLayerAndCanvas,
@@ -500,8 +500,7 @@ describe('Shape', function () {
     assert.equal(rect.x(), 100);
     assert.equal(rect.y(), 50);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.5;
     // rect
     context.beginPath();
@@ -572,8 +571,7 @@ describe('Shape', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 50);
     context.closePath();
@@ -617,8 +615,7 @@ describe('Shape', function () {
     assert.equal(rect.x(), 100);
     assert.equal(rect.y(), 50);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.5;
     // rect
     context.beginPath();
@@ -665,8 +662,7 @@ describe('Shape', function () {
 
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.5;
     // stroke
     context.beginPath();
@@ -711,8 +707,7 @@ describe('Shape', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 50);
     context.closePath();
@@ -722,8 +717,7 @@ describe('Shape', function () {
     context.fill();
     context.stroke();
 
-    var c2 = createCanvas();
+    const { canvas: c2, context: ctx2 } = createCanvasAndContext();
-    var ctx2 = c2.getContext('2d');
     ctx2.shadowColor = 'grey';
     ctx2.shadowBlur = 10 * Konva.pixelRatio;
     ctx2.shadowOffsetX = 20 * Konva.pixelRatio;
@@ -774,8 +768,7 @@ describe('Shape', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.3;
 
     // draw shadow
@@ -854,8 +847,7 @@ describe('Shape', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     context.save();
     context.shadowColor = 'black';
@@ -1257,8 +1249,7 @@ describe('Shape', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     // rect
     context.beginPath();
     context.rect(100, 100, 50, 50);
@@ -1303,8 +1294,7 @@ describe('Shape', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     // rect
     context.beginPath();
     context.rect(50, 100, 50, 50);
@@ -1352,8 +1342,7 @@ describe('Shape', function () {
     layer.add(group);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     // rect
     context.beginPath();
     context.rect(100, 100, 50, 50);
@@ -1397,8 +1386,7 @@ describe('Shape', function () {
 
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.globalAlpha = 0.5;
     // stroke
     context.beginPath();
@@ -1441,8 +1429,7 @@ describe('Shape', function () {
 
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     // stroke
     context.beginPath();
@@ -1455,8 +1442,7 @@ describe('Shape', function () {
     context.fill();
     context.stroke();
 
-    var canvas2 = createCanvas();
+    const { canvas: canvas2, context: context2 } = createCanvasAndContext();
-    var context2 = canvas2.getContext('2d');
     context2.globalAlpha = 0.5;
     context2.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
 
@@ -1652,8 +1638,7 @@ describe('Shape', function () {
     layer.add(rect);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(100, 50, 100, 50);
     context.closePath();
@@ -1980,9 +1965,9 @@ describe('Shape', function () {
       var oldCreate = ctx.createPattern;
 
       var callCount = 0;
-      ctx.createPattern = function () {
+      ctx.createPattern = function (...args) {
         callCount += 1;
-        return oldCreate.apply(this, arguments);
+        return oldCreate.apply(this, args);
       };
 
       layer.draw();
@@ -2078,9 +2063,9 @@ describe('Shape', function () {
     var oldCreate = ctx.createLinearGradient;
 
     var callCount = 0;
-    ctx.createLinearGradient = function () {
+    ctx.createLinearGradient = function (...args) {
       callCount += 1;
-      return oldCreate.apply(this, arguments);
+      return oldCreate.apply(this, args);
     };
 
     layer.draw();
@@ -2176,9 +2161,9 @@ describe('Shape', function () {
     var oldCreate = ctx.createRadialGradient;
 
     var callCount = 0;
-    ctx.createRadialGradient = function () {
+    ctx.createRadialGradient = function (...args) {
       callCount += 1;
-      return oldCreate.apply(this, arguments);
+      return oldCreate.apply(this, args);
     };
 
     layer.draw();
@@ -2349,8 +2334,7 @@ describe('Shape', function () {
     var layer = new Konva.Layer();
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context: ctx } = createCanvasAndContext();
-    var ctx = canvas.getContext('2d');
 
     var gradient = ctx.createLinearGradient(0, 75, 100, 75);
     gradient.addColorStop(0.0, 'rgba(255,255,255,1)');
@@ -2440,8 +2424,7 @@ describe('Shape', function () {
     stage.add(layer);
 
     // Create expected result using native canvas with buffer approach
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
 
     // Draw on buffer first
     context.beginPath();
@@ -2459,8 +2442,8 @@ describe('Shape', function () {
     context.stroke();
 
     // Apply opacity by drawing to final canvas
-    var finalCanvas = createCanvas();
+    const { canvas: finalCanvas, context: finalContext } =
-    var finalContext = finalCanvas.getContext('2d');
+      createCanvasAndContext();
     finalContext.globalAlpha = 0.7;
     finalContext.drawImage(canvas, 0, 0);
 

test/unit/Stage-test.ts

@@ -10,12 +10,12 @@ import {
   simulateTouchEnd,
   simulatePointerMove,
   compareCanvases,
-  createCanvas,
   showHit,
   getContainer,
   isNode,
   isBrowser,
   Konva,
+  createCanvasAndContext,
 } from './test-utils.ts';
 
 describe('Stage', function () {
@@ -210,7 +210,7 @@ describe('Stage', function () {
     }
     var stage = addStage();
     var container = document.createElement('div');
-    var wrap = stage.container().parentNode;
+    var wrap = stage.container().parentNode!;
     wrap.appendChild(container);
 
     stage.container(container);
@@ -240,7 +240,7 @@ describe('Stage', function () {
     layer.draw();
 
     var container = document.createElement('div');
-    var wrap = stage.container().parentNode;
+    var wrap = stage.container().parentNode!;
     wrap.appendChild(container);
 
     var clone = stage.clone();
@@ -257,7 +257,7 @@ describe('Stage', function () {
     }
     var stage = addStage();
     var container = stage.container();
-    var parent = stage.content.parentElement;
+    var parent = stage.content.parentElement!;
 
     parent.removeChild(stage.content);
 
@@ -334,7 +334,7 @@ describe('Stage', function () {
     });
 
     stage.on('contentMousemove', function () {
-      var pos = stage.getPointerPosition();
+      var pos = stage.getPointerPosition()!;
       var shape = stage.getIntersection(pos);
       if (!shape) {
         //console.log(pos);
@@ -1367,10 +1367,9 @@ describe('Stage', function () {
       height: stage.height() + 20,
     });
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
     canvas.width = radius * 2;
     canvas.height = radius * 2;
-    var context = canvas.getContext('2d');
     context.beginPath();
     context.arc(radius, radius, radius, 0, 2 * Math.PI);
     context.fillStyle = 'black';

test/unit/Text-test.ts

@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
   addStage,
   Konva,
-  createCanvas,
+  createCanvasAndContext,
   compareLayerAndCanvas,
   compareLayers,
   loadImage,
@@ -18,7 +18,7 @@ export function getOffsetY(
 ) {
   const metrics = context.measureText('M') as any;
   fontSize =
-    fontSize || parseInt(context.font.split('px')[0].split(' ').pop(), 10);
+    fontSize || parseInt(context.font.split('px')[0].split(' ').pop()!, 10);
   lineHeight = lineHeight || 1;
 
   // Use the same fallbacks as Text.measureSize() for missing advanced metrics
@@ -166,8 +166,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.textBaseline = 'alphabetic';
     context.font = 'normal normal 50px Arial';
     context.fillStyle = 'darkgrey';
@@ -193,8 +192,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.textBaseline = 'alphabetic';
     context.font = 'normal normal 50px Arial';
 
@@ -224,8 +222,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.textBaseline = 'alphabetic';
     context.font = 'normal normal 20px Arial';
     context.fillStyle = 'black';
@@ -254,8 +251,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.textBaseline = 'middle';
     context.letterSpacing = '10px';
     context.font = 'normal normal 50px Arial';
@@ -1010,8 +1006,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.translate(0, 80);
     context.lineWidth = 2;
     context.font = '80px Arial';
@@ -1395,8 +1390,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
-    var context = canvas.getContext('2d');
     context.translate(50, 50);
     context.lineWidth = 2;
     context.font = '50px Arial';
@@ -1450,8 +1444,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context: ctx } = createCanvasAndContext();
-    var ctx = canvas.getContext('2d');
 
     ctx.fillStyle = 'green';
     ctx.font = 'normal 50px Arial';
@@ -1490,8 +1483,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context: ctx } = createCanvasAndContext();
-    var ctx = canvas.getContext('2d');
 
     ctx.fillStyle = 'green';
     ctx.font = 'normal 50px Arial';
@@ -1541,8 +1533,7 @@ describe('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    var canvas = createCanvas();
+    const { canvas, context: ctx } = createCanvasAndContext();
-    var ctx = canvas.getContext('2d');
 
     ctx.fillStyle = 'green';
     ctx.font = 'normal 50px Arial';
@@ -1669,14 +1660,13 @@ describe('Text', function () {
       layer.add(text);
       stage.add(layer);
 
-      var canvas = createCanvas();
+      const { canvas, context: ctx } = createCanvasAndContext();
-      var ctx = canvas.getContext('2d');
 
       ctx.fillStyle = 'green';
       ctx.font = 'normal normal 30px Arial';
       ctx.textBaseline = 'alphabetic';
 
-      var grd = ctx.createPattern(imageObj, 'repeat');
+      var grd = ctx.createPattern(imageObj, 'repeat')!;
       ctx.fillStyle = grd;
 
       ctx.fillText(text.text(), 0, getOffsetY(ctx));
@@ -1704,14 +1694,13 @@ describe('Text', function () {
       layer.add(text);
       stage.add(layer);
 
-      var canvas = createCanvas();
+      const { canvas, context: ctx } = createCanvasAndContext();
-      var ctx = canvas.getContext('2d');
 
       ctx.fillStyle = 'green';
       ctx.font = 'normal normal 30px Arial';
       ctx.textBaseline = 'alphabetic';
 
-      var grd = ctx.createPattern(imageObj, 'repeat');
+      var grd = ctx.createPattern(imageObj, 'repeat')!;
       const matrix = new (global as any).DOMMatrix([1, 0, 0, 1, -50, 0]);
       grd.setTransform(matrix);
 
@@ -1742,14 +1731,13 @@ describe('Text', function () {
       layer.add(text);
       stage.add(layer);
 
-      var canvas = createCanvas();
+      const { canvas, context: ctx } = createCanvasAndContext();
-      var ctx = canvas.getContext('2d');
 
       ctx.fillStyle = 'green';
       ctx.font = 'normal normal 30px Arial';
       ctx.textBaseline = 'alphabetic';
 
-      var grd = ctx.createPattern(imageObj, 'repeat');
+      var grd = ctx.createPattern(imageObj, 'repeat')!;
       const matrix = new (global as any).DOMMatrix([0.5, 0, 0, 0.5, 0, 0]);
 
       grd.setTransform(matrix);

test/unit/TouchEvents-test.ts

@@ -826,8 +826,8 @@ describe('TouchEvents', function () {
 
     stage.on('tap', function (e) {
       assert.equal(e.target, circle1);
-      assert.equal(stage.getPointerPosition().x, 100);
+      assert.equal(stage.getPointerPosition()?.x, 100);
-      assert.equal(stage.getPointerPosition().y, 100);
+      assert.equal(stage.getPointerPosition()?.y, 100);
       tap += 1;
     });
 

test/unit/Transformer-test.ts

@@ -1,6 +1,7 @@
 import { assert } from 'chai';
 import { Transformer } from '../../src/shapes/Transformer.ts';
 import type { Rect } from '../../src/shapes/Rect.ts';
+import type { Shape } from '../../src/Shape.ts';
 
 import {
   addStage,
@@ -12,13 +13,25 @@ import {
   assertAlmostEqual,
 } from './test-utils.ts';
 
-function simulateMouseDown(tr, pos) {
+function simulateMouseDown(
-  sd(tr.getStage(), pos);
+  tr: Transformer,
+  pos: { x: number; y: number; button?: number }
+) {
+  sd(tr.getStage()!, pos);
 }
 
-function simulateMouseMove(tr, pos) {
+function simulateMouseMove(
-  const stage = tr.getStage();
+  tr: Transformer,
-  var top = (stage.content && stage.content.getBoundingClientRect().top) || 0;
+  pos: {
+    target?: Shape | null;
+    x: number;
+    y: number;
+    button?: number;
+    altKey?: boolean;
+  }
+) {
+  const stage = tr.getStage()!;
+  const top = stage?.content?.getBoundingClientRect().top ?? 0;
   tr._handleMouseMove({
     ...pos,
     clientX: pos.x,
@@ -28,13 +41,13 @@ function simulateMouseMove(tr, pos) {
 }
 
 function simulateMouseUp(tr: Transformer, pos = { x: 0, y: 0 }) {
-  const stage = tr.getStage();
+  const stage = tr.getStage()!;
-  var top = (stage.content && stage.content.getBoundingClientRect().top) || 0;
+  const top = stage.content?.getBoundingClientRect().top ?? 0;
   tr._handleMouseUp({
     clientX: pos.x,
     clientY: pos.y + top,
   });
-  su(tr.getStage(), pos || { x: 1, y: 1 });
+  su(stage, pos || { x: 1, y: 1 });
 }
 
 describe('Transformer', function () {
@@ -68,7 +81,7 @@ describe('Transformer', function () {
     assert.equal(tr.height(), rect.height());
 
     // manual check of correct position of node
-    var handler = tr.findOne('.bottom-right');
+    var handler = tr.findOne('.bottom-right')!;
     var pos = handler.getAbsolutePosition();
     assert.equal(pos.x, rect.x() + rect.width());
     assert.equal(pos.y, rect.y() + rect.height());
@@ -431,7 +444,7 @@ describe('Transformer', function () {
     assert.equal(tr.x(), 100, 'second x');
     assert.equal(tr.width(), 200);
     // check visual
-    var pos = tr.findOne('.top-right').getAbsolutePosition();
+    var pos = tr.findOne('.top-right')!.getAbsolutePosition();
     assert.equal(pos.x, 300);
 
     stage.draw();
@@ -693,7 +706,7 @@ describe('Transformer', function () {
     assert.equal(tr.y(), rect.y());
     assert.equal(tr.width(), rect.width());
     assert.equal(tr.height(), rect.height());
-    assert.equal(tr.findOne('.back').width(), rect.width());
+    assert.equal(tr.findOne('.back')?.width(), rect.width());
   });
 
   it('add transformer for transformed rect', function () {
@@ -1391,7 +1404,7 @@ describe('Transformer', function () {
     layer.add(tr);
     layer.draw();
 
-    var anchor = tr.findOne('.top-right');
+    var anchor = tr.findOne('.top-right')!;
     var pos = anchor.getAbsolutePosition();
 
     simulateMouseDown(tr, {
@@ -1434,7 +1447,7 @@ describe('Transformer', function () {
 
     layer.draw();
 
-    var anchor = tr.findOne('.top-left');
+    var anchor = tr.findOne('.top-left')!;
     assertAlmostEqual(anchor.getAbsolutePosition().x, 20);
 
     simulateMouseDown(tr, {
@@ -2025,7 +2038,7 @@ describe('Transformer', function () {
     assert.equal(tr.height(), 100);
 
     // manual check position
-    var back = tr.findOne('.back');
+    var back = tr.findOne('.back')!;
     assert.equal(back.getAbsolutePosition().x, 0);
 
     layer.batchDraw();
@@ -2188,7 +2201,7 @@ describe('Transformer', function () {
     layer.add(tr);
     layer.draw();
 
-    var rotater = tr.findOne('.rotater');
+    var rotater = tr.findOne('.rotater')!;
     var pos = rotater.getAbsolutePosition();
 
     simulateMouseDown(tr, {
@@ -2724,7 +2737,7 @@ describe('Transformer', function () {
       x: 20,
       y: 20,
     });
-    assert.equal(shape.name(), 'top-left _anchor');
+    assert.equal(shape?.name(), 'top-left _anchor');
   });
 
   it('check rotator size on scaled transformer', function () {
@@ -2751,7 +2764,7 @@ describe('Transformer', function () {
     layer.add(tr);
     layer.draw();
 
-    var rotater = tr.findOne('.rotater');
+    var rotater = tr.findOne('.rotater')!;
     var pos = rotater.getAbsolutePosition();
 
     // pos.x === (x * scaleX - (height))
@@ -4874,7 +4887,7 @@ describe('Transformer', function () {
     });
     layer.add(tr);
     // manual check of correct position of node
-    var handler = tr.findOne<Rect>('.bottom-right');
+    var handler = tr.findOne<Rect>('.bottom-right')!;
     assert.equal(handler.fill(), 'white');
 
     tr.anchorStyleFunc((anchor) => {

test/unit/Tween-test.ts

@@ -153,7 +153,7 @@ describe('Tween', function () {
     stage.add(layer);
 
     var duration = 0.1;
-    var c = Konva.Util.colorToRGBA('rgba(0,255,0,0.5)');
+    var c = Konva.Util.colorToRGBA('rgba(0,255,0,0.5)')!;
     var endFill = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
     var midFill = 'rgba(128,128,0,0.75)';
 

test/unit/imagediff.ts

@@ -125,7 +125,7 @@ function toImageDataFromContext(context) {
 function toCanvas(object) {
   const data = toImageData(object),
     canvas = getCanvas(data.width, data.height),
-    context = canvas.getContext('2d');
+    context = canvas.getContext('2d')!;
 
   context.putImageData(data, 0, 0);
   return canvas;

test/unit/test-utils.ts

@@ -21,8 +21,8 @@ beforeEach(function () {
 
 // clear after test
 afterEach(function () {
-  var isFailed = this.currentTest.state == 'failed';
+  var isFailed = this.currentTest?.state === 'failed';
-  var isManual = this.currentTest.parent.title === 'Manual';
+  var isManual = this.currentTest?.parent?.title === 'Manual';
 
   Konva.stages.forEach(function (stage) {
     clearTimeout(stage._mouseDblTimeout);
@@ -44,7 +44,7 @@ export const isNode = typeof global.document === 'undefined';
 export const isBrowser = !isNode;
 
 export function getContainer() {
-  return document.getElementById('konva-container');
+  return document.getElementById('konva-container')!;
 }
 
 export function addContainer() {
@@ -69,7 +69,7 @@ export function addStage(attrs?) {
   });
 
   if (!isNode) {
-    getContainer().appendChild(container);
+    getContainer().appendChild(container!);
   }
 
   return stage;
@@ -111,9 +111,7 @@ export function compareCanvases(canvas1, canvas2, tol?, secondTol?) {
   var equal = imagediff.equal(canvas1, canvas2, tol, secondTol);
   if (!equal) {
     const diff = imagediff.diff(canvas1, canvas2);
-    const diffCanvas = createCanvas();
+    const { canvas: diffCanvas, context } = createCanvasAndContext();
-
-    const context = diffCanvas.getContext('2d');
     context.putImageData(diff, 0, 0);
 
     var base64 = diffCanvas.toDataURL();
@@ -171,12 +169,13 @@ export function compareLayers(layer1: Layer, layer2: Layer, tol?, secondTol?) {
   );
 }
 
-export function createCanvas() {
+export function createCanvasAndContext() {
-  var node = Konva.Util.createCanvasElement();
+  const canvas = Konva.Util.createCanvasElement();
-  node.width = 578 * Konva.pixelRatio;
+  canvas.width = 578 * Konva.pixelRatio;
-  node.height = 200 * Konva.pixelRatio;
+  canvas.height = 200 * Konva.pixelRatio;
-  node.getContext('2d').scale(Konva.pixelRatio, Konva.pixelRatio);
+  const context = canvas.getContext('2d')!;
-  return node;
+  context.scale(Konva.pixelRatio, Konva.pixelRatio);
+  return { canvas, context };
 }
 
 export function showHit(layer) {
@@ -189,7 +188,10 @@ export function showHit(layer) {
   getContainer().appendChild(canvas);
 }
 
-export function simulateMouseDown(stage, pos) {
+export function simulateMouseDown(
+  stage: Stage,
+  pos: { x: number; y: number; button?: number }
+) {
   simulatePointerDown(stage, pos);
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
 
@@ -198,10 +200,13 @@ export function simulateMouseDown(stage, pos) {
     clientY: pos.y + top,
     button: pos.button || 0,
     type: 'mousedown',
-  });
+  } as any);
 }
 
-export function simulateMouseMove(stage, pos) {
+export function simulateMouseMove(
+  stage: Stage,
+  pos: { x: number; y: number; button?: number }
+) {
   simulatePointerMove(stage, pos);
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
   var evt = {
@@ -212,7 +217,7 @@ export function simulateMouseMove(stage, pos) {
   };
 
   Konva.DD._drag(evt);
-  stage._pointermove(evt);
+  stage._pointermove(evt as any);
 }
 
 export function simulateMouseUp(stage, pos) {
@@ -344,7 +349,13 @@ export function simulateTouchEnd(stage, pos, changed?) {
   Konva.DD._endDragAfter(evt);
 }
 
-export function simulatePointerDown(stage: Stage, pos) {
+type SimulatedPointerEvent = {
+  x: number;
+  y: number;
+  button?: number;
+  pointerId?: number;
+};
+export function simulatePointerDown(stage: Stage, pos: SimulatedPointerEvent) {
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
   stage._pointerdown({
     clientX: pos.x,
@@ -355,7 +366,7 @@ export function simulatePointerDown(stage: Stage, pos) {
   } as any);
 }
 
-export function simulatePointerMove(stage: Stage, pos) {
+export function simulatePointerMove(stage: Stage, pos: SimulatedPointerEvent) {
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
   var evt = {
     clientX: pos.x,
@@ -369,7 +380,7 @@ export function simulatePointerMove(stage: Stage, pos) {
   // Konva.DD._drag(evt);
 }
 
-export function simulatePointerUp(stage: Stage, pos) {
+export function simulatePointerUp(stage: Stage, pos: SimulatedPointerEvent) {
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
   var evt = {
     clientX: pos.x,

tsconfig.test.json

@@ -1,19 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "strict": false,
+    "noEmit": true
-    "noImplicitAny": false,
-    "allowJs": true,
-    "noEmit": true,
-    "checkJs": false,
-    "allowUnreachableCode": true,
-    "allowUnusedLabels": true,
-    "noFallthroughCasesInSwitch": false,
-    "noImplicitReturns": false,
-    "noImplicitThis": false,
-    "noPropertyAccessFromIndexSignature": false,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false
   },
   "include": ["src", "test"]
 }