@shqld/canvas 2.11.2-rc.3 → 3.2.2

package/Readme.md

@@ -1,29 +1,34 @@
-# node-canvas
+# @shqld/canvas
 
-![Test](https://github.com/Automattic/node-canvas/workflows/Test/badge.svg)
-[![NPM version](https://badge.fury.io/js/canvas.svg)](http://badge.fury.io/js/canvas)
-
-node-canvas is a [Cairo](http://cairographics.org/)-backed Canvas implementation for [Node.js](http://nodejs.org).
+Fork of [node-canvas](https://github.com/Automattic/node-canvas) with prebuilt binaries distributed as platform-specific npm packages. No compiler or system dependencies required.
 
 ## Installation
 
 ```bash
-$ npm install canvas
+npm install @shqld/canvas
 ```
 
-By default, binaries for macOS, Linux and Windows will be downloaded. If you want to build from source, use `npm install --build-from-source` and see the **Compiling** section below.
+Prebuilt binaries are available for:
 
-The minimum version of Node.js required is **6.0.0**.
+- Linux x64 (glibc)
+- Linux arm64 (glibc)
+- macOS arm64 (Apple Silicon)
+- macOS x64 (Intel)
+- Windows x64
 
-### Compiling
+No C++ compiler, Cairo, or Pango installation needed. Just `npm install` and go.
+
+If you're on an unsupported platform, the install script falls back to building from source (see **Compiling** below).
 
-If you don't have a supported OS or processor architecture, or you use `--build-from-source`, the module will be compiled on your system. This requires several dependencies, including Cairo and Pango.
+The minimum version of Node.js required is **18.12.0**.
+
+### Compiling
 
-For detailed installation information, see the [wiki](https://github.com/Automattic/node-canvas/wiki/_pages). One-line installation instructions for common OSes are below. Note that libgif/giflib, librsvg and libjpeg are optional and only required if you need GIF, SVG and JPEG support, respectively. Cairo v1.10.0 or later is required.
+On unsupported platforms, the module will be compiled from source automatically. This requires several dependencies, including Cairo and Pango.
 
 OS | Command
 ----- | -----
-OS X | Using [Homebrew](https://brew.sh/):<br/>`brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman`
+macOS | Using [Homebrew](https://brew.sh/):<br/>`brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptools`
 Ubuntu | `sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev`
 Fedora | `sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel`
 Solaris | `pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto`
@@ -31,13 +36,10 @@ OpenBSD | `doas pkg_add cairo pango png jpeg giflib`
 Windows | See the [wiki](https://github.com/Automattic/node-canvas/wiki/Installation:-Windows)
 Others | See the [wiki](https://github.com/Automattic/node-canvas/wiki)
 
-**Mac OS X v10.11+:** If you have recently updated to Mac OS X v10.11+ and are experiencing trouble when compiling, run the following command: `xcode-select --install`. Read more about the problem [on Stack Overflow](http://stackoverflow.com/a/32929012/148072).
-If you have xcode 10.0 or higher installed, in order to build from source you need NPM 6.4.1 or higher.
-
 ## Quick Example
 
 ```javascript
-const { createCanvas, loadImage } = require('canvas')
+const { createCanvas, loadImage } = require('@shqld/canvas')
 const canvas = createCanvas(200, 200)
 const ctx = canvas.getContext('2d')
 
@@ -62,11 +64,16 @@ loadImage('examples/images/lime-cat.jpg').then((image) => {
 })
 ```
 
-## Upgrading from 1.x to 2.x
+## Migrating from `canvas`
+
+Replace the package name in your imports:
 
-See the [changelog](https://github.com/Automattic/node-canvas/blob/master/CHANGELOG.md) for a guide to upgrading from 1.x to 2.x.
+```diff
+- const { createCanvas, loadImage } = require('canvas')
++ const { createCanvas, loadImage } = require('@shqld/canvas')
+```
 
-For version 1.x documentation, see [the v1.x branch](https://github.com/Automattic/node-canvas/tree/v1.x).
+The API is identical. This fork only changes the distribution method (prebuilt binaries via npm optional dependencies instead of prebuild-install).
 
 ## Documentation
 
@@ -78,6 +85,8 @@ This project is an implementation of the Web Canvas API and implements that API
 * [createImageData()](#createimagedata)
 * [loadImage()](#loadimage)
 * [registerFont()](#registerfont)
+* [deregisterAllFonts()](#deregisterAllFonts)
+
 
 ### Non-standard APIs
 
@@ -103,7 +112,7 @@ This project is an implementation of the Web Canvas API and implements that API
 Creates a Canvas instance. This method works in both Node.js and Web browsers, where there is no Canvas constructor. (See `browser.js` for the implementation that runs in browsers.)
 
 ```js
-const { createCanvas } = require('canvas')
+const { createCanvas } = require('@shqld/canvas')
 const mycanvas = createCanvas(200, 200)
 const myPDFcanvas = createCanvas(600, 800, 'pdf') // see "PDF Support" section
 ```
@@ -120,7 +129,7 @@ const myPDFcanvas = createCanvas(600, 800, 'pdf') // see "PDF Support" section
 Creates an ImageData instance. This method works in both Node.js and Web browsers.
 
 ```js
-const { createImageData } = require('canvas')
+const { createImageData } = require('@shqld/canvas')
 const width = 20, height = 20
 const arraySize = width * height * 4
 const mydata = createImageData(new Uint8ClampedArray(arraySize), width)
@@ -135,7 +144,7 @@ const mydata = createImageData(new Uint8ClampedArray(arraySize), width)
 Convenience method for loading images. This method works in both Node.js and Web browsers.
 
 ```js
-const { loadImage } = require('canvas')
+const { loadImage } = require('@shqld/canvas')
 const myimg = loadImage('http://server.com/image.png')
 
 myimg.then(() => {
@@ -155,10 +164,10 @@ const myimg = await loadImage('http://server.com/image.png')
 > registerFont(path: string, { family: string, weight?: string, style?: string }) => void
 > ```
 
-To use a font file that is not installed as a system font, use `registerFont()` to register the font with Canvas. *This must be done before the Canvas is created.*
+To use a font file that is not installed as a system font, use `registerFont()` to register the font with Canvas.
 
 ```js
-const { registerFont, createCanvas } = require('canvas')
+const { registerFont, createCanvas } = require('@shqld/canvas')
 registerFont('comicsans.ttf', { family: 'Comic Sans' })
 
 const canvas = createCanvas(500, 500)
@@ -170,6 +179,35 @@ ctx.fillText('Everyone hates this font :(', 250, 10)
 
 The second argument is an object with properties that resemble the CSS properties that are specified in `@font-face` rules. You must specify at least `family`. `weight`, and `style` are optional and default to `'normal'`.
 
+### deregisterAllFonts()
+
+> ```ts
+> deregisterAllFonts() => void
+> ```
+
+Use `deregisterAllFonts` to unregister all fonts that have been previously registered. This method is useful when you want to remove all registered fonts, such as when using the canvas in tests
+
+```ts
+const { registerFont, createCanvas, deregisterAllFonts } = require('@shqld/canvas')
+
+describe('text rendering', () => {
+    afterEach(() => {
+        deregisterAllFonts();
+    })
+    it('should render text with Comic Sans', () => {
+        registerFont('comicsans.ttf', { family: 'Comic Sans' })
+
+        const canvas = createCanvas(500, 500)
+        const ctx = canvas.getContext('2d')
+        
+        ctx.font = '12px "Comic Sans"'
+        ctx.fillText('Everyone loves this font :)', 250, 10)
+        
+        // assertScreenshot()
+    })
+})
+```
+
 ### Image#src
 
 > ```ts
@@ -179,7 +217,7 @@ The second argument is an object with properties that resemble the CSS propertie
 As in browsers, `img.src` can be set to a `data:` URI or a remote URL. In addition, node-canvas allows setting `src` to a local file path or `Buffer` instance.
 
 ```javascript
-const { Image } = require('canvas')
+const { Image } = require('@shqld/canvas')
 
 // From a buffer:
 fs.readFile('images/squid.png', (err, squid) => {
@@ -218,7 +256,7 @@ Applies to JPEG images drawn to PDF canvases only.
 Setting `img.dataMode = Image.MODE_MIME` or `Image.MODE_MIME|Image.MODE_IMAGE` enables MIME data tracking of images. When MIME data is tracked, PDF canvases can embed JPEGs directly into the output, rather than re-encoding into PNG. This can drastically reduce filesize and speed up rendering.
 
 ```javascript
-const { Image, createCanvas } = require('canvas')
+const { Image, createCanvas } = require('@shqld/canvas')
 const canvas = createCanvas(w, h, 'pdf')
 const img = new Image()
 img.dataMode = Image.MODE_IMAGE // Only image data tracked
@@ -478,6 +516,26 @@ ctx.addPage(400, 800)
 ctx.fillText('Hello World 2', 50, 80)
 ```
 
+It is possible to add hyperlinks using `.beginTag()` and `.endTag()`:
+
+```js
+ctx.beginTag('Link', "uri='https://google.com'")
+ctx.font = '22px Helvetica'
+ctx.fillText('Hello World', 50, 80)
+ctx.endTag('Link')
+```
+
+Or with a defined rectangle:
+
+```js
+ctx.beginTag('Link', "uri='https://google.com' rect=[50 80 100 20]")
+ctx.endTag('Link')
+```
+
+Note that the syntax for attributes is unique to Cairo. See [cairo_tag_begin](https://www.cairographics.org/manual/cairo-Tags-and-Links.html#cairo-tag-begin) for the full documentation.
+
+You can create areas on the canvas using the "cairo.dest" tag, and then link to them using the "Link" tag with the `dest=` attribute. You can also define PDF structure for accessibility by using tag names like "P", "H1", and "TABLE". The standard tags are defined in §14.8.4 of the [PDF 1.7](https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf) specification.
+
 See also:
 
 * [Image#dataMode](#imagedatamode) for embedding JPEGs in PDFs
@@ -543,15 +601,11 @@ Notes and caveats:
 
 ## Testing
 
-First make sure you've built the latest version. Get all the deps you need (see [compiling](#compiling) above), and run:
-
-```
-npm install --build-from-source
-```
+For unit tests: `npm run test`.
 
 For visual tests: `npm run test-server` and point your browser to http://localhost:4000.
 
-For unit tests: `npm run test`.
+For smoke testing prebuilt binaries: `node test/smoke.js`.
 
 ## Benchmarks
 

package/binding.gyp

@@ -57,14 +57,10 @@
     },
     {
       'target_name': 'canvas',
-      'include_dirs': ["<!(node -e \"require('nan')\")"],
+      'include_dirs': ["<!(node -p \"require('node-addon-api').include_dir\")"],
+      'defines': [ 'NAPI_DISABLE_CPP_EXCEPTIONS', 'NODE_ADDON_API_ENABLE_MAYBE' ],
       'sources': [
-        'src/backend/Backend.cc',
-        'src/backend/ImageBackend.cc',
-        'src/backend/PdfBackend.cc',
-        'src/backend/SvgBackend.cc',
         'src/bmp/BMPParser.cc',
-        'src/Backends.cc',
         'src/Canvas.cc',
         'src/CanvasGradient.cc',
         'src/CanvasPattern.cc',
@@ -74,7 +70,8 @@
         'src/Image.cc',
         'src/ImageData.cc',
         'src/init.cc',
-        'src/register_font.cc'
+        'src/register_font.cc',
+        'src/FontParser.cc'
       ],
       'conditions': [
         ['OS=="win"', {
@@ -142,7 +139,9 @@
           'cflags_cc!': ['-fno-exceptions']
         }],
         ['OS=="mac"', {
+          'cflags+': ['-fvisibility=hidden'],
           'xcode_settings': {
+            'GCC_SYMBOLS_PRIVATE_EXTERN': 'YES', # -fvisibility=hidden
             'GCC_ENABLE_CPP_EXCEPTIONS': 'YES'
           }
         }],

package/browser.js

@@ -1,9 +1,5 @@
 /* globals document, ImageData */
 
-const parseFont = require('./lib/parse-font')
-
-exports.parseFont = parseFont
-
 exports.createCanvas = function (width, height) {
   return Object.assign(document.createElement('canvas'), { width: width, height: height })
 }

package/{types/index.d.ts → index.d.ts}

@@ -63,19 +63,19 @@ export class Canvas {
 	readonly stride: number;
 
 	/** Constant used in PNG encoding methods. */
-	readonly PNG_NO_FILTERS: number
+	static readonly PNG_NO_FILTERS: number
 	/** Constant used in PNG encoding methods. */
-	readonly PNG_ALL_FILTERS: number
+	static readonly PNG_ALL_FILTERS: number
 	/** Constant used in PNG encoding methods. */
-	readonly PNG_FILTER_NONE: number
+	static readonly PNG_FILTER_NONE: number
 	/** Constant used in PNG encoding methods. */
-	readonly PNG_FILTER_SUB: number
+	static readonly PNG_FILTER_SUB: number
 	/** Constant used in PNG encoding methods. */
-	readonly PNG_FILTER_UP: number
+	static readonly PNG_FILTER_UP: number
 	/** Constant used in PNG encoding methods. */
-	readonly PNG_FILTER_AVG: number
+	static readonly PNG_FILTER_AVG: number
 	/** Constant used in PNG encoding methods. */
-	readonly PNG_FILTER_PAETH: number
+	static readonly PNG_FILTER_PAETH: number
 
 	constructor(width: number, height: number, type?: 'image'|'pdf'|'svg')
 
@@ -128,10 +128,13 @@ export class Canvas {
 }
 
 export interface TextMetrics {
+	readonly alphabeticBaseline: number;
 	readonly actualBoundingBoxAscent: number;
 	readonly actualBoundingBoxDescent: number;
 	readonly actualBoundingBoxLeft: number;
 	readonly actualBoundingBoxRight: number;
+	readonly emHeightAscent: number;
+	readonly emHeightDescent: number;
 	readonly fontBoundingBoxAscent: number;
 	readonly fontBoundingBoxDescent: number;
 	readonly width: number;
@@ -201,6 +204,7 @@ export class CanvasRenderingContext2D {
 	getTransform(): DOMMatrix;
 	resetTransform(): void;
 	setTransform(transform?: DOMMatrix): void;
+	setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
 	isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
 	scale(x: number, y: number): void;
 	clip(fillRule?: CanvasFillRule): void;
@@ -228,6 +232,8 @@ export class CanvasRenderingContext2D {
 	createPattern(image: Canvas|Image, repetition: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | '' | null): CanvasPattern
 	createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
 	createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+	beginTag(tagName: string, attributes?: string): void;
+	endTag(tagName: string): void;
 	/**
 	 * _Non-standard_. Defaults to 'good'. Affects pattern (gradient, image,
 	 * etc.) rendering quality.
@@ -284,6 +290,8 @@ export class CanvasRenderingContext2D {
 	textBaseline: CanvasTextBaseline;
 	textAlign: CanvasTextAlign;
 	canvas: Canvas;
+	direction: 'ltr' | 'rtl';
+	lang: string;
 }
 
 export class CanvasGradient {
@@ -391,15 +399,28 @@ export class JPEGStream extends Readable {}
 /** This class must not be constructed directly; use `canvas.createPDFStream()`. */
 export class PDFStream extends Readable {}
 
+// TODO: this is wrong. See matrixTransform in lib/DOMMatrix.js
+type DOMMatrixInit = DOMMatrix | string | number[];
+
+interface DOMPointInit {
+  w?: number;
+  x?: number;
+  y?: number;
+  z?: number;
+}
+
 export class DOMPoint {
 	w: number;
 	x: number;
 	y: number;
 	z: number;
+	matrixTransform(matrix?: DOMMatrixInit): DOMPoint;
+	toJSON(): any;
+	static fromPoint(other?: DOMPointInit): DOMPoint;
 }
 
 export class DOMMatrix {
-	constructor(init: string | number[]);
+	constructor(init?: string | number[]);
 	toString(): string;
 	multiply(other?: DOMMatrix): DOMMatrix;
 	multiplySelf(other?: DOMMatrix): DOMMatrix;
@@ -410,6 +431,10 @@ export class DOMMatrix {
 	scale3d(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
 	scale3dSelf(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
 	scaleSelf(scaleX?: number, scaleY?: number, scaleZ?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
+	/**
+	 * @deprecated
+	 */
+	scaleNonUniform(scaleX?: number, scaleY?: number): DOMMatrix;
 	rotateFromVector(x?: number, y?: number): DOMMatrix;
 	rotateFromVectorSelf(x?: number, y?: number): DOMMatrix;
 	rotate(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
@@ -426,6 +451,7 @@ export class DOMMatrix {
 	invertSelf(): DOMMatrix;
 	setMatrixValue(transformList: string): DOMMatrix;
 	transformPoint(point?: DOMPoint): DOMPoint;
+	toJSON(): any;
 	toFloat32Array(): Float32Array;
 	toFloat64Array(): Float64Array;
 	readonly is2D: boolean;
@@ -465,9 +491,6 @@ export class ImageData {
 	readonly width: number;
 }
 
-// This is marked private, but is exported...
-// export function parseFont(description: string): object
-
 // Not documented: backends
 
 /** Library version. */

package/index.js

@@ -2,7 +2,6 @@ const Canvas = require('./lib/canvas')
 const Image = require('./lib/image')
 const CanvasRenderingContext2D = require('./lib/context2d')
 const CanvasPattern = require('./lib/pattern')
-const parseFont = require('./lib/parse-font')
 const packageJson = require('./package.json')
 const bindings = require('./lib/bindings')
 const fs = require('fs')
@@ -11,6 +10,8 @@ const PDFStream = require('./lib/pdfstream')
 const JPEGStream = require('./lib/jpegstream')
 const { DOMPoint, DOMMatrix } = require('./lib/DOMMatrix')
 
+bindings.setDOMMatrix(DOMMatrix)
+
 function createCanvas (width, height, type) {
   return new Canvas(width, height, type)
 }
@@ -70,7 +71,6 @@ exports.DOMPoint = DOMPoint
 
 exports.registerFont = registerFont
 exports.deregisterAllFonts = deregisterAllFonts
-exports.parseFont = parseFont
 
 exports.createCanvas = createCanvas
 exports.createImageData = createImageData

package/lib/DOMMatrix.js

@@ -17,6 +17,26 @@ class DOMPoint {
     this.z = typeof z === 'number' ? z : 0
     this.w = typeof w === 'number' ? w : 1
   }
+
+  matrixTransform(init) {
+    // TODO: this next line is wrong. matrixTransform is supposed to only take
+    // an object with the DOMMatrix properties called DOMMatrixInit
+    const m = init instanceof DOMMatrix ? init : new DOMMatrix(init)
+    return m.transformPoint(this)
+  }
+
+  toJSON() {
+    return {
+      x: this.x,
+      y: this.y,
+      z: this.z,
+      w: this.w
+    }
+  }
+
+  static fromPoint(other) {
+    return new this(other.x, other.y, other.z, other.w)
+  }
 }
 
 // Constants to index into _values (col-major)
@@ -163,6 +183,13 @@ class DOMMatrix {
     return this.scaleSelf(scale, scale, scale, originX, originY, originZ)
   }
 
+  /**
+   * @deprecated
+   */
+  scaleNonUniform(scaleX, scaleY) {
+    return this.scale(scaleX, scaleY)
+  }
+
   scaleSelf (scaleX, scaleY, scaleZ, originX, originY, originZ) {
     // Not redundant with translate's checks because we need to negate the values later.
     if (typeof originX !== 'number') originX = 0
@@ -587,6 +614,37 @@ Object.defineProperties(DOMMatrix.prototype, {
              values[M31] === 0 && values[M32] === 0 && values[M33] === 1 && values[M34] === 0 &&
              values[M41] === 0 && values[M42] === 0 && values[M43] === 0 && values[M44] === 1)
     }
+  },
+
+  toJSON: {
+    value() {
+      return {
+        a: this.a,
+        b: this.b,
+        c: this.c,
+        d: this.d,
+        e: this.e,
+        f: this.f,
+        m11: this.m11,
+        m12: this.m12,
+        m13: this.m13,
+        m14: this.m14,
+        m21: this.m21,
+        m22: this.m22,
+        m23: this.m23,
+        m23: this.m23,
+        m31: this.m31,
+        m32: this.m32,
+        m33: this.m33,
+        m34: this.m34,
+        m41: this.m41,
+        m42: this.m42,
+        m43: this.m43,
+        m44: this.m44,
+        is2D: this.is2D,
+        isIdentity: this.isIdentity,
+      }
+    }
   }
 })
 

package/lib/bindings.js

@@ -31,6 +31,7 @@ function isMuslLinux () {
     })
     return output.includes('musl')
   } catch (e) {
+    // ldd --version exits non-zero on musl and prints to stderr
     return e.stderr ? e.stderr.includes('musl') : false
   }
 }
@@ -41,6 +42,7 @@ function loadBinding () {
 
   if (packageName) {
     try {
+      // Windows: DLLs are next to canvas.node, add to search path
       if (process.platform === 'win32') {
         const pkgDir = path.dirname(require.resolve(`${packageName}/package.json`))
         process.env.PATH = pkgDir + path.delimiter + process.env.PATH
@@ -51,6 +53,7 @@ function loadBinding () {
     }
   }
 
+  // Fallback: locally built binary
   try {
     const localPath = path.resolve(__dirname, '..', 'build', 'Release')
     if (process.platform === 'win32') {
@@ -71,10 +74,40 @@ const bindings = loadBinding()
 
 module.exports = bindings
 
+Object.defineProperty(bindings.Canvas.prototype, Symbol.toStringTag, {
+  value: 'HTMLCanvasElement',
+  configurable: true
+})
+
+Object.defineProperty(bindings.Image.prototype, Symbol.toStringTag, {
+  value: 'HTMLImageElement',
+  configurable: true
+})
+
 bindings.ImageData.prototype.toString = function () {
   return '[object ImageData]'
 }
 
+Object.defineProperty(bindings.ImageData.prototype, Symbol.toStringTag, {
+  value: 'ImageData',
+  configurable: true
+})
+
 bindings.CanvasGradient.prototype.toString = function () {
   return '[object CanvasGradient]'
 }
+
+Object.defineProperty(bindings.CanvasGradient.prototype, Symbol.toStringTag, {
+  value: 'CanvasGradient',
+  configurable: true
+})
+
+Object.defineProperty(bindings.CanvasPattern.prototype, Symbol.toStringTag, {
+  value: 'CanvasPattern',
+  configurable: true
+})
+
+Object.defineProperty(bindings.CanvasRenderingContext2d.prototype, Symbol.toStringTag, {
+  value: 'CanvasRenderingContext2d',
+  configurable: true
+})

package/lib/context2d.js

@@ -7,8 +7,5 @@
  */
 
 const bindings = require('./bindings')
-const parseFont = require('./parse-font')
-const { DOMMatrix } = require('./DOMMatrix')
 
-bindings.CanvasRenderingContext2dInit(DOMMatrix, parseFont)
 module.exports = bindings.CanvasRenderingContext2d

package/lib/image.js

@@ -14,9 +14,6 @@ const bindings = require('./bindings')
 const Image = module.exports = bindings.Image
 const util = require('util')
 
-// Lazily loaded simple-get
-let get
-
 const { GetSource, SetSource } = bindings
 
 Object.defineProperty(Image.prototype, 'src', {
@@ -47,25 +44,29 @@ Object.defineProperty(Image.prototype, 'src', {
           }
         }
 
-        if (!get) get = require('simple-get')
-
-        get.concat({
-          url: val,
+        fetch(val, {
+          method: 'GET',
           headers: { 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36' }
-        }, (err, res, data) => {
-          if (err) return onerror(err)
-
-          if (res.statusCode < 200 || res.statusCode >= 300) {
-            return onerror(new Error(`Server responded with ${res.statusCode}`))
-          }
-
-          setSource(this, data)
         })
+          .then(res => {
+            if (!res.ok) {
+              throw new Error(`Server responded with ${res.status}`)
+            }
+            return res.arrayBuffer()
+          })
+          .then(data => {
+            setSource(this, Buffer.from(data))
+          })
+          .catch(onerror)
       } else { // local file path assumed
         setSource(this, val)
       }
     } else if (Buffer.isBuffer(val)) {
       setSource(this, val)
+    } else {
+      const err = new Error("Invalid image source")
+      if (typeof this.onerror === 'function') this.onerror(err)
+      else throw err
     }
   },
 

package/lib/pattern.js

@@ -7,9 +7,7 @@
  */
 
 const bindings = require('./bindings')
-const { DOMMatrix } = require('./DOMMatrix')
 
-bindings.CanvasPatternInit(DOMMatrix)
 module.exports = bindings.CanvasPattern
 
 bindings.CanvasPattern.prototype.toString = function () {