fix: getTransform should return DOMMatrix (#602)

__test__/index.spec.ts

@@ -1,6 +1,6 @@
 import ava, { TestFn } from 'ava'
 
-import { createCanvas, Path2D, Canvas, SKRSContext2D } from '../index'
+import { createCanvas, Path2D, Canvas, SKRSContext2D, DOMMatrix } from '../index'
 
 import { snapshotImage } from './image-snapshot'
 
@@ -154,14 +154,7 @@ test('textBaseline state should be ok', (t) => {
 
 test('getTransform', (t) => {
   const { ctx } = t.context
-  t.deepEqual(ctx.getTransform(), {
-    a: 1,
-    b: 0,
-    c: 0,
-    d: 1,
-    e: 0,
-    f: 0,
-  })
+  t.deepEqual(ctx.getTransform(), new DOMMatrix([1, 0, 0, 1, 0, 0]))
 })
 
 test('stroke-and-filling-jpeg', async (t) => {

index.d.ts

@@ -276,14 +276,7 @@ export interface SKRSContext2D
     repeat: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | null,
   ): CanvasPattern
   getContextAttributes(): { alpha: boolean; desynchronized: boolean }
-  getTransform(): {
-    a: number
-    b: number
-    c: number
-    d: number
-    e: number
-    f: number
-  }
+  getTransform(): DOMMatrix
 }
 
 export type ColorSpace = 'srgb' | 'display-p3'

index.js

@@ -50,6 +50,18 @@ if (!('has' in GlobalFonts)) {
   })
 }
 
+const _getTransform = CanvasRenderingContext2D.prototype.getTransform
+
+CanvasRenderingContext2D.prototype.getTransform = function getTransform() {
+  const transform = _getTransform.apply(this, arguments)
+  // monkey patched, skip
+  if (transform instanceof DOMMatrix) {
+    return transform
+  }
+  const { a, b, c, d, e, f } = transform
+  return new DOMMatrix([a, b, c, d, e, f])
+}
+
 function createCanvas(width, height, flag) {
   const isSvgBackend = typeof flag !== 'undefined'
   return isSvgBackend ? new SVGCanvas(width, height, flag) : new CanvasElement(width, height)