bug: stringify CanvasPattern, ImageData, CanvasGradient like browsers

Fixes #1646
Fixes #1639

CHANGELOG.md

@@ -10,6 +10,7 @@ project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 ### Added
 ### Fixed
+* Stringify CanvasGradient, CanvasPattern and ImageData like browsers do. (#1639, #1646)
 
 2.9.0
 ==================

lib/bindings.js

@@ -1,3 +1,13 @@
 'use strict'
 
-module.exports = require('../build/Release/canvas.node')
+const bindings = require('../build/Release/canvas.node')
+
+module.exports = bindings
+
+bindings.ImageData.prototype.toString = function () {
+	return '[object ImageData]'
+}
+
+bindings.CanvasGradient.prototype.toString = function () {
+	return '[object CanvasGradient]'
+}

lib/pattern.js

@@ -11,3 +11,7 @@ const { DOMMatrix } = require('./DOMMatrix')
 
 bindings.CanvasPatternInit(DOMMatrix)
 module.exports = bindings.CanvasPattern
+
+bindings.CanvasPattern.prototype.toString = function () {
+	return '[object CanvasPattern]'
+}

test/canvas.test.js

@@ -1317,37 +1317,44 @@ describe('Canvas', function () {
     })
   });
 
-  it('Context2d#createPattern(Image)', function () {
-    return loadImage(path.join(__dirname, '/fixtures/checkers.png')).then((img) => {
-      const canvas = createCanvas(20, 20)
-      const ctx = canvas.getContext('2d')
-      const pattern = ctx.createPattern(img)
+  it('Context2d#createPattern(Image)', async function () {
+    const img = await loadImage(path.join(__dirname, '/fixtures/checkers.png'));
+    const canvas = createCanvas(20, 20)
+    const ctx = canvas.getContext('2d')
+    const pattern = ctx.createPattern(img)
 
-      ctx.fillStyle = pattern
-      ctx.fillRect(0, 0, 20, 20)
-
-      const imageData = ctx.getImageData(0, 0, 20, 20)
-      assert.equal(20, imageData.width)
-      assert.equal(20, imageData.height)
-      assert.equal(1600, imageData.data.length)
-
-      let i = 0; let b = true
-      while (i < imageData.data.length) {
-        if (b) {
-          assert.equal(0, imageData.data[i++])
-          assert.equal(0, imageData.data[i++])
-          assert.equal(0, imageData.data[i++])
-          assert.equal(255, imageData.data[i++])
-        } else {
-          assert.equal(255, imageData.data[i++])
-          assert.equal(255, imageData.data[i++])
-          assert.equal(255, imageData.data[i++])
-          assert.equal(255, imageData.data[i++])
-        }
-        // alternate b, except when moving to a new row
-        b = i % (imageData.width * 4) === 0 ? b : !b
+    ctx.fillStyle = pattern
+    ctx.fillRect(0, 0, 20, 20)
+
+    const imageData = ctx.getImageData(0, 0, 20, 20)
+    assert.equal(20, imageData.width)
+    assert.equal(20, imageData.height)
+    assert.equal(1600, imageData.data.length)
+
+    let i = 0; let b = true
+    while (i < imageData.data.length) {
+      if (b) {
+        assert.equal(0, imageData.data[i++])
+        assert.equal(0, imageData.data[i++])
+        assert.equal(0, imageData.data[i++])
+        assert.equal(255, imageData.data[i++])
+      } else {
+        assert.equal(255, imageData.data[i++])
+        assert.equal(255, imageData.data[i++])
+        assert.equal(255, imageData.data[i++])
+        assert.equal(255, imageData.data[i++])
       }
-    })
+      // alternate b, except when moving to a new row
+      b = i % (imageData.width * 4) === 0 ? b : !b
+    }
+  })
+
+  it('CanvasPattern stringifies as [object CanvasPattern]', async function () {
+    const img = await loadImage(path.join(__dirname, '/fixtures/checkers.png'));
+    const canvas = createCanvas(20, 20)
+    const ctx = canvas.getContext('2d')
+    const pattern = ctx.createPattern(img)
+    assert.strictEqual(pattern.toString(), '[object CanvasPattern]')
   })
 
   it('Context2d#createLinearGradient()', function () {
@@ -1380,6 +1387,13 @@ describe('Canvas', function () {
     assert.equal(255, imageData.data[i + 3])
   })
 
+  it('CanvasGradient stringifies as [object CanvasGradient]', function () {
+    const canvas = createCanvas(20, 1)
+    const ctx = canvas.getContext('2d')
+    const gradient = ctx.createLinearGradient(1, 1, 19, 1)
+    assert.strictEqual(gradient.toString(), '[object CanvasGradient]')
+  })
+
   describe('Context2d#putImageData()', function () {
     it('throws for invalid arguments', function () {
       const canvas = createCanvas(2, 1)

test/imageData.test.js

@@ -12,6 +12,11 @@ describe('ImageData', function () {
     assert.throws(function () { ImageData.prototype.width }, /incompatible receiver/)
   })
 
+  it('stringifies as [object ImageData]', function () {
+    const imageData = createImageData(2, 3)
+    assert.strictEqual(imageData.toString(), '[object ImageData]')
+  })
+
   it('should throw with invalid numeric arguments', function () {
     assert.throws(() => { createImageData(0, 0) }, /width is zero/)
     assert.throws(() => { createImageData(1, 0) }, /height is zero/)