Renamed drawOnCanvas to writeToCanvas.

Author: dlemstra

src/magick-image.ts

@@ -359,31 +359,6 @@ export class MagickImage extends NativeInstance {
             settings._removeArtifacts(this);
     }
 
-    drawOnCanvas(canvas: HTMLCanvasElement): void {
-        canvas.width = this.width;
-        canvas.height = this.height;
-
-        const ctx = canvas.getContext('2d');
-        if (ctx === null)
-            return;
-
-        PixelCollection._map(this, 'RGBA', q => {
-            const imageData = ctx.createImageData(this.width, this.height);
-
-            let p = 0;
-            for (let y = 0; y < this.height; y++) {
-                for (let x = 0; x < this.width; x++) {
-                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
-                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
-                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
-                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
-                }
-            }
-
-            ctx.putImageData(imageData, 0, 0);
-        });
-    }
-
     evaluate(channels: Channels, operator: EvaluateOperator, value: number): void;
     evaluate(channels: Channels, operator: EvaluateOperator, value: Percentage): void;
     evaluate(channels: Channels, geometry: MagickGeometry, operator: EvaluateOperator, value: number): void;
@@ -696,6 +671,31 @@ export class MagickImage extends NativeInstance {
         return func(bytes);
     }
 
+    writeToCanvas(canvas: HTMLCanvasElement): void {
+        canvas.width = this.width;
+        canvas.height = this.height;
+
+        const ctx = canvas.getContext('2d');
+        if (ctx === null)
+            return;
+
+        PixelCollection._map(this, 'RGBA', q => {
+            const imageData = ctx.createImageData(this.width, this.height);
+
+            let p = 0;
+            for (let y = 0; y < this.height; y++) {
+                for (let x = 0; x < this.width; x++) {
+                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
+                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
+                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
+                    imageData.data[p++] = ImageMagick._api.HEAPU8[q++];
+                }
+            }
+
+            ctx.putImageData(imageData, 0, 0);
+        });
+    }
+
     /** @internal */
     static _createFromImage(instance: number, settings: MagickSettings): MagickImage {
         return new MagickImage(instance, settings);

tests/magick-image/draw-on-canvas.spec.ts

@@ -0,0 +1,48 @@
+/* Copyright Dirk Lemstra https://github.com/dlemstra/Magick.WASM */
+
+import { ImageMagick } from '../../src/image-magick';
+import { JSDOM } from 'jsdom';
+import { MagickColors } from '../../src/magick-colors';
+import { MagickImage } from '../../src/magick-image';
+
+let image: MagickImage;
+
+beforeEach(() => {
+    ImageMagick._api = (global as any).native;
+    image = MagickImage.create();
+});
+
+afterEach(() => {
+    image.dispose();
+});
+
+describe('MagickImage#writeToCanvas', () => {
+    it('should write the image on the canvas', () => {
+        let canvasData: Uint8ClampedArray | null = null;
+
+        const window = new JSDOM().window;
+        const canvas = window.document.createElement('canvas');
+
+        window.HTMLCanvasElement.prototype.getContext = <any> jest.fn(function(contextId: string) {
+            expect(contextId).toBe('2d');
+            return {
+                createImageData: function(width: number, height: number) {
+                    return {
+                        data: new Array(width*height*4)
+                    };
+                },
+                putImageData: function(imageData: ImageData, x: number, y: number) {
+                    expect(x).toBe(0);
+                    expect(y).toBe(0);
+
+                    canvasData = imageData.data;
+                }
+            };
+        });
+
+        image.read(MagickColors.Magenta, 1, 1);
+        image.writeToCanvas(canvas);
+
+        expect(canvasData).toEqual([255, 0, 255, 255]);
+    });
+});