@nativescript/canvas 1.0.0-debug.0 → 1.1.0-alpha.0

package/Canvas2D/CanvasRenderingContext2D/index.ios.js

@@ -14,10 +14,10 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     }
     _fillRuleFromString(string) {
         if (string === 'evenodd') {
-            return TNSFillRule.EvenOdd;
+            return 1 /* TNSFillRule.EvenOdd */;
         }
         else if (string === 'nonzero') {
-            return TNSFillRule.NonZero;
+            return 0 /* TNSFillRule.NonZero */;
         }
         return null;
     }
@@ -29,13 +29,13 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     }
     get direction() {
         this.log('direction');
-        return this.context.getDirection() === 0 /* Ltr */ ? "ltr" : "rtl";
+        return this.context.getDirection() === 0 /* TNSTextDirection.Ltr */ ? 'ltr' : 'rtl';
     }
     set direction(value) {
         this.log('direction value:', value);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setDirection(value === "rtl" ? 1 /* Rtl */ : 0 /* Ltr */);
+            this.context.setDirection(value === 'rtl' ? 1 /* TNSTextDirection.Rtl */ : 0 /* TNSTextDirection.Ltr */);
         }
     }
     get font() {
@@ -84,9 +84,9 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     get imageSmoothingQuality() {
         this.log('get imageSmoothingQuality');
         switch (this.context.imageSmoothingQuality) {
-            case 2 /* High */:
+            case 2 /* TNSImageSmoothingQuality.High */:
                 return 'high';
-            case 1 /* Medium */:
+            case 1 /* TNSImageSmoothingQuality.Medium */:
                 return 'medium';
             default:
                 return 'low';
@@ -98,13 +98,13 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         if (this.context) {
             switch (quality) {
                 case 'high':
-                    this.context.imageSmoothingQuality = 2 /* High */;
+                    this.context.imageSmoothingQuality = 2 /* TNSImageSmoothingQuality.High */;
                     break;
                 case 'medium':
-                    this.context.imageSmoothingQuality = 1 /* Medium */;
+                    this.context.imageSmoothingQuality = 1 /* TNSImageSmoothingQuality.Medium */;
                     break;
                 case 'low':
-                    this.context.imageSmoothingQuality = 0 /* Low */;
+                    this.context.imageSmoothingQuality = 0 /* TNSImageSmoothingQuality.Low */;
                     break;
             }
         }
@@ -123,9 +123,9 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     get lineJoin() {
         this.log('get lineJoin');
         switch (this.context.lineJoin) {
-            case 1 /* Bevel */:
+            case 1 /* TNSLineJoin.Bevel */:
                 return 'bevel';
-            case 0 /* Round */:
+            case 0 /* TNSLineJoin.Round */:
                 return 'round';
             default:
                 return 'miter';
@@ -137,13 +137,13 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         if (this.context) {
             switch (join) {
                 case 'bevel':
-                    this.context.lineJoin = 1 /* Bevel */;
+                    this.context.lineJoin = 1 /* TNSLineJoin.Bevel */;
                     break;
                 case 'round':
-                    this.context.lineJoin = 0 /* Round */;
+                    this.context.lineJoin = 0 /* TNSLineJoin.Round */;
                     break;
                 case 'miter':
-                    this.context.lineJoin = 2 /* Miter */;
+                    this.context.lineJoin = 2 /* TNSLineJoin.Miter */;
                     break;
             }
         }
@@ -151,9 +151,9 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     get lineCap() {
         this.log('get lineCap');
         switch (this.context.lineCap) {
-            case 1 /* Round */:
+            case 1 /* TNSLineCap.Round */:
                 return 'round';
-            case 2 /* Square */:
+            case 2 /* TNSLineCap.Square */:
                 return 'square';
             default:
                 return 'butt';
@@ -165,13 +165,13 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         if (this.context) {
             switch (cap) {
                 case 'round':
-                    this.context.lineCap = 1 /* Round */;
+                    this.context.lineCap = 1 /* TNSLineCap.Round */;
                     break;
                 case 'square':
-                    this.context.lineCap = 2 /* Square */;
+                    this.context.lineCap = 2 /* TNSLineCap.Square */;
                     break;
                 case 'butt':
-                    this.context.lineCap = 0 /* Butt */;
+                    this.context.lineCap = 0 /* TNSLineCap.Butt */;
             }
         }
     }
@@ -222,13 +222,13 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     get textAlign() {
         this.log('get textAlign');
         switch (this.context.textAlign) {
-            case 0 /* Start */:
+            case 0 /* TNSTextAlignment.Start */:
                 return 'start';
-            case 2 /* Center */:
+            case 2 /* TNSTextAlignment.Center */:
                 return 'center';
-            case 4 /* End */:
+            case 4 /* TNSTextAlignment.End */:
                 return 'end';
-            case 3 /* Right */:
+            case 3 /* TNSTextAlignment.Right */:
                 return 'right';
             default:
                 return 'left';
@@ -240,19 +240,19 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         if (this.context) {
             switch (alignment) {
                 case 'start':
-                    this.context.textAlign = 0 /* Start */;
+                    this.context.textAlign = 0 /* TNSTextAlignment.Start */;
                     break;
                 case 'center':
-                    this.context.textAlign = 2 /* Center */;
+                    this.context.textAlign = 2 /* TNSTextAlignment.Center */;
                     break;
                 case 'end':
-                    this.context.textAlign = 4 /* End */;
+                    this.context.textAlign = 4 /* TNSTextAlignment.End */;
                     break;
                 case 'right':
-                    this.context.textAlign = 3 /* Right */;
+                    this.context.textAlign = 3 /* TNSTextAlignment.Right */;
                     break;
                 case 'left':
-                    this.context.textAlign = 1 /* Left */;
+                    this.context.textAlign = 1 /* TNSTextAlignment.Left */;
                     break;
             }
         }
@@ -260,57 +260,57 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     get globalCompositeOperation() {
         this.log('get globalCompositeOperation');
         switch (this.context.globalCompositeOperation) {
-            case 0 /* SourceOver */:
+            case 0 /* TNSCompositeOperationType.SourceOver */:
                 return 'source-over';
-            case 1 /* SourceIn */:
+            case 1 /* TNSCompositeOperationType.SourceIn */:
                 return 'source-in';
-            case 2 /* SourceOut */:
+            case 2 /* TNSCompositeOperationType.SourceOut */:
                 return 'source-out';
-            case 3 /* SourceAtop */:
+            case 3 /* TNSCompositeOperationType.SourceAtop */:
                 return 'source-atop';
-            case 4 /* DestinationOver */:
+            case 4 /* TNSCompositeOperationType.DestinationOver */:
                 return 'destination-over';
-            case 5 /* DestinationIn */:
+            case 5 /* TNSCompositeOperationType.DestinationIn */:
                 return 'destination-in';
-            case 6 /* DestinationOut */:
+            case 6 /* TNSCompositeOperationType.DestinationOut */:
                 return 'destination-out';
-            case 7 /* DestinationAtop */:
+            case 7 /* TNSCompositeOperationType.DestinationAtop */:
                 return 'destination-atop';
-            case 8 /* Lighter */:
+            case 8 /* TNSCompositeOperationType.Lighter */:
                 return 'lighter';
-            case 9 /* Copy */:
+            case 9 /* TNSCompositeOperationType.Copy */:
                 return 'copy';
-            case 10 /* Xor */:
+            case 10 /* TNSCompositeOperationType.Xor */:
                 return 'xor';
-            case 11 /* Multiply */:
+            case 11 /* TNSCompositeOperationType.Multiply */:
                 return 'multiply';
-            case 12 /* Screen */:
+            case 12 /* TNSCompositeOperationType.Screen */:
                 return 'screen';
-            case 13 /* Overlay */:
+            case 13 /* TNSCompositeOperationType.Overlay */:
                 return 'overlay';
-            case 14 /* Darken */:
+            case 14 /* TNSCompositeOperationType.Darken */:
                 return 'darken';
-            case 15 /* Lighten */:
+            case 15 /* TNSCompositeOperationType.Lighten */:
                 return 'lighten';
-            case 16 /* ColorDodge */:
+            case 16 /* TNSCompositeOperationType.ColorDodge */:
                 return 'color-dodge';
-            case 17 /* ColorBurn */:
+            case 17 /* TNSCompositeOperationType.ColorBurn */:
                 return 'color-burn';
-            case 18 /* HardLight */:
+            case 18 /* TNSCompositeOperationType.HardLight */:
                 return 'hard-light';
-            case 19 /* SoftLight */:
+            case 19 /* TNSCompositeOperationType.SoftLight */:
                 return 'soft-light';
-            case 20 /* Difference */:
+            case 20 /* TNSCompositeOperationType.Difference */:
                 return 'difference';
-            case 21 /* Exclusion */:
+            case 21 /* TNSCompositeOperationType.Exclusion */:
                 return 'exclusion';
-            case 22 /* Hue */:
+            case 22 /* TNSCompositeOperationType.Hue */:
                 return 'hue';
-            case 23 /* Saturation */:
+            case 23 /* TNSCompositeOperationType.Saturation */:
                 return 'saturation';
-            case 24 /* Color */:
+            case 24 /* TNSCompositeOperationType.Color */:
                 return 'color';
-            case 25 /* Luminosity */:
+            case 25 /* TNSCompositeOperationType.Luminosity */:
                 return 'luminosity';
         }
     }
@@ -320,82 +320,82 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         if (this.context) {
             switch (composite.toLowerCase()) {
                 case 'source-over':
-                    this.context.globalCompositeOperation = 0 /* SourceOver */;
+                    this.context.globalCompositeOperation = 0 /* TNSCompositeOperationType.SourceOver */;
                     break;
                 case 'source-in':
-                    this.context.globalCompositeOperation = 1 /* SourceIn */;
+                    this.context.globalCompositeOperation = 1 /* TNSCompositeOperationType.SourceIn */;
                     break;
                 case 'source-out':
-                    this.context.globalCompositeOperation = 2 /* SourceOut */;
+                    this.context.globalCompositeOperation = 2 /* TNSCompositeOperationType.SourceOut */;
                     break;
                 case 'source-atop':
-                    this.context.globalCompositeOperation = 3 /* SourceAtop */;
+                    this.context.globalCompositeOperation = 3 /* TNSCompositeOperationType.SourceAtop */;
                     break;
                 case 'destination-over':
-                    this.context.globalCompositeOperation = 4 /* DestinationOver */;
+                    this.context.globalCompositeOperation = 4 /* TNSCompositeOperationType.DestinationOver */;
                     break;
                 case 'destination-in':
-                    this.context.globalCompositeOperation = 5 /* DestinationIn */;
+                    this.context.globalCompositeOperation = 5 /* TNSCompositeOperationType.DestinationIn */;
                     break;
                 case 'destination-out':
-                    this.context.globalCompositeOperation = 6 /* DestinationOut */;
+                    this.context.globalCompositeOperation = 6 /* TNSCompositeOperationType.DestinationOut */;
                     break;
                 case 'destination-atop':
-                    this.context.globalCompositeOperation = 7 /* DestinationAtop */;
+                    this.context.globalCompositeOperation = 7 /* TNSCompositeOperationType.DestinationAtop */;
                     break;
                 case 'lighter':
-                    this.context.globalCompositeOperation = 8 /* Lighter */;
+                    this.context.globalCompositeOperation = 8 /* TNSCompositeOperationType.Lighter */;
                     break;
                 case 'copy':
-                    this.context.globalCompositeOperation = 9 /* Copy */;
+                    this.context.globalCompositeOperation = 9 /* TNSCompositeOperationType.Copy */;
                     break;
                 case 'xor':
-                    this.context.globalCompositeOperation = 10 /* Xor */;
+                    this.context.globalCompositeOperation = 10 /* TNSCompositeOperationType.Xor */;
                     break;
                 case 'multiply':
-                    this.context.globalCompositeOperation = 11 /* Multiply */;
+                    this.context.globalCompositeOperation = 11 /* TNSCompositeOperationType.Multiply */;
                     break;
                 case 'screen':
-                    this.context.globalCompositeOperation = 12 /* Screen */;
+                    this.context.globalCompositeOperation = 12 /* TNSCompositeOperationType.Screen */;
                     break;
                 case 'overlay':
-                    this.context.globalCompositeOperation = 13 /* Overlay */;
+                    this.context.globalCompositeOperation = 13 /* TNSCompositeOperationType.Overlay */;
                     break;
                 case 'darken':
-                    this.context.globalCompositeOperation = 14 /* Darken */;
+                    this.context.globalCompositeOperation = 14 /* TNSCompositeOperationType.Darken */;
                     break;
                 case 'lighten':
-                    this.context.globalCompositeOperation = 15 /* Lighten */;
+                    this.context.globalCompositeOperation = 15 /* TNSCompositeOperationType.Lighten */;
                     break;
                 case 'color-dodge':
-                    this.context.globalCompositeOperation = 16 /* ColorDodge */;
+                    this.context.globalCompositeOperation = 16 /* TNSCompositeOperationType.ColorDodge */;
                     break;
                 case 'color-burn':
-                    this.context.globalCompositeOperation = 17 /* ColorBurn */;
+                    this.context.globalCompositeOperation = 17 /* TNSCompositeOperationType.ColorBurn */;
                     break;
                 case 'hard-light':
-                    this.context.globalCompositeOperation = 18 /* HardLight */;
+                    this.context.globalCompositeOperation = 18 /* TNSCompositeOperationType.HardLight */;
                     break;
                 case 'soft-light':
-                    this.context.globalCompositeOperation = 19 /* SoftLight */;
+                    this.context.globalCompositeOperation = 19 /* TNSCompositeOperationType.SoftLight */;
                     break;
                 case 'difference':
-                    this.context.globalCompositeOperation = 20 /* Difference */;
+                    this.context.globalCompositeOperation = 20 /* TNSCompositeOperationType.Difference */;
                     break;
                 case 'exclusion':
-                    this.context.globalCompositeOperation = 21 /* Exclusion */;
+                    this.context.globalCompositeOperation = 21 /* TNSCompositeOperationType.Exclusion */;
                     break;
                 case 'hue':
-                    this.context.globalCompositeOperation = 22 /* Hue */;
+                    this.context.globalCompositeOperation = 22 /* TNSCompositeOperationType.Hue */;
                     break;
                 case 'saturation':
-                    this.context.globalCompositeOperation = 23 /* Saturation */;
+                    this.context.globalCompositeOperation = 23 /* TNSCompositeOperationType.Saturation */;
                     break;
                 case 'color':
-                    this.context.globalCompositeOperation = 24 /* Color */;
+                    this.context.globalCompositeOperation = 24 /* TNSCompositeOperationType.Color */;
                     break;
                 case 'luminosity':
-                    this.context.globalCompositeOperation = 25 /* Luminosity */;
+                    this.context.globalCompositeOperation = 25 /* TNSCompositeOperationType.Luminosity */;
                     break;
             }
         }
@@ -413,12 +413,12 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     get fillStyle() {
         this.log('get fillStyle');
         switch (this.context.fillStyle.getStyleType()) {
-            case 0 /* Color */:
+            case 0 /* CanvasColorStyleType.Color */:
                 const color = this.context.fillStyle;
                 return color.color;
-            case 1 /* Gradient */:
+            case 1 /* CanvasColorStyleType.Gradient */:
                 return CanvasGradient.fromNative(this.context.fillStyle);
-            case 2 /* Pattern */:
+            case 2 /* CanvasColorStyleType.Pattern */:
                 return new CanvasPattern(this.context.fillStyle);
         }
     }
@@ -429,7 +429,7 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         }
         this._ensureLayoutBeforeDraw();
         if (typeof color === 'string') {
-            this.context.fillStyle = TNSColor.alloc().init(color);
+            this.context.setFillStyleWithString(color);
         }
         else if (color instanceof CanvasGradient) {
             this.context.fillStyle = color.native;
@@ -441,12 +441,12 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     get strokeStyle() {
         this.log('get strokeStyle');
         switch (this.context.strokeStyle.getStyleType()) {
-            case 0 /* Color */:
+            case 0 /* CanvasColorStyleType.Color */:
                 const color = this.context.strokeStyle;
                 return color.color;
-            case 1 /* Gradient */:
+            case 1 /* CanvasColorStyleType.Gradient */:
                 return CanvasGradient.fromNative(this.context.strokeStyle);
-            case 2 /* Pattern */:
+            case 2 /* CanvasColorStyleType.Pattern */:
                 return new CanvasPattern(this.context.strokeStyle);
         }
     }
@@ -457,7 +457,7 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         }
         this._ensureLayoutBeforeDraw();
         if (typeof color === 'string') {
-            this.context.strokeStyle = TNSColor.alloc().init(color);
+            this.context.setStrokeStyleWithString(color);
         }
         else if (color instanceof CanvasGradient) {
             this.context.strokeStyle = color.native;
@@ -477,8 +477,7 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
             this.context.lineWidth = width;
         }
     }
-    addHitRegion(region) {
-    }
+    addHitRegion(region) { }
     arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
         this.log('arc', x, y, radius, startAngle, anticlockwise);
         this._ensureLayoutBeforeDraw();
@@ -499,8 +498,7 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         this._ensureLayoutBeforeDraw();
         this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
     }
-    clearHitRegions() {
-    }
+    clearHitRegions() { }
     clearRect(x, y, width, height) {
         this.log('clearRect', x, y, width, height);
         this._ensureLayoutBeforeDraw();
@@ -579,34 +577,38 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
                 img = ImageSource.fromFileSync(image.src).ios;
             }
         }
-        else if (image &&
-            typeof image.tagName === 'string' &&
-            image.tagName === 'CANVAS') {
+        else if (image && typeof image.tagName === 'string' && image.tagName === 'CANVAS') {
             if (image._canvas instanceof Canvas) {
                 img = image._canvas.ios;
             }
         }
+        else if (image instanceof ImageBitmap || (image === null || image === void 0 ? void 0 : image.native) instanceof TNSImageBitmap) {
+            img = image.native;
+        }
         if (!img) {
             return null;
         }
         let rep;
         switch (repetition) {
             case 'no-repeat':
-                rep = 3 /* NoRepeat */;
+                rep = 3 /* TNSPatternRepetition.NoRepeat */;
                 break;
             case 'repeat-x':
-                rep = 1 /* RepeatX */;
+                rep = 1 /* TNSPatternRepetition.RepeatX */;
                 break;
             case 'repeat-y':
-                rep = 2 /* RepeatY */;
+                rep = 2 /* TNSPatternRepetition.RepeatY */;
                 break;
             default:
-                rep = 0 /* Repeat */;
+                rep = 0 /* TNSPatternRepetition.Repeat */;
                 break;
         }
         if (img instanceof TNSImageAsset) {
             return new CanvasPattern(this.context.createPattern(img, rep));
         }
+        else if (img instanceof TNSImageBitmap) {
+            return new CanvasPattern(this.context.createPattern(img, rep));
+        }
         else if (img instanceof UIImage) {
             return new CanvasPattern(this.context.createPattern(img, rep));
         }
@@ -620,8 +622,12 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         this._ensureLayoutBeforeDraw();
         return CanvasGradient.fromNative(this.context.createRadialGradient(x0, y0, r0, x1, y1, r1));
     }
-    drawFocusIfNeeded(...args) {
+    createConicGradient(startAngle, x, y) {
+        this.log('createConicGradient value:', startAngle, x, y);
+        this._ensureLayoutBeforeDraw();
+        return CanvasGradient.fromNative(this.context.createConicGradient(startAngle, x, y));
     }
+    drawFocusIfNeeded(...args) { }
     drawImage(...args) {
         this.log('drawImage', ...args);
         this._ensureLayoutBeforeDraw();
@@ -638,9 +644,7 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         else if (image instanceof ImageAsset || image instanceof UIImage) {
             // NOOP
         }
-        else if (image &&
-            typeof image.tagName === 'string' &&
-            (image.tagName === 'IMG' || image.tagName === 'IMAGE')) {
+        else if (image && typeof image.tagName === 'string' && (image.tagName === 'IMG' || image.tagName === 'IMAGE')) {
             width = image.width;
             height = image.height;
             if (image._imageSource instanceof ImageSource) {
@@ -656,11 +660,12 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
                 image = ImageSource.fromFileSync(image.src).ios;
             }
         }
-        else if (image &&
-            typeof image.tagName === 'string' &&
-            image.tagName === 'CANVAS' && image._canvas instanceof Canvas) {
+        else if (image && typeof image.tagName === 'string' && image.tagName === 'CANVAS' && image._canvas instanceof Canvas) {
             image = image._canvas;
         }
+        else if (image instanceof ImageBitmap || (image === null || image === void 0 ? void 0 : image.native) instanceof TNSImageBitmap) {
+            image = image.native;
+        }
         if (args.length === 3) {
             if (image instanceof ImageAsset) {
                 this.context.drawImage(image.native, args[1], args[2]);
@@ -727,10 +732,10 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         this.log('fillText', text, x, y, maxWidth);
         this._ensureLayoutBeforeDraw();
         if (typeof maxWidth === 'number') {
-            this.context.fillText(text, x, y, maxWidth);
+            this.context.fillText(text + '', x, y, maxWidth);
         }
         else {
-            this.context.fillText(text, x, y);
+            this.context.fillText(text + '', x, y);
         }
     }
     getImageData(sx, sy, sw, sh) {
@@ -807,8 +812,17 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         this._ensureLayoutBeforeDraw();
         this.context.rect(x, y, width, height);
     }
-    removeHitRegion(id) {
+    roundRect(x, y, width, height, radii) {
+        this.log('rect value:', x, y, width, height);
+        this._ensureLayoutBeforeDraw();
+        if (Array.isArray(radii)) {
+            this.context.roundRect(x, y, width, height, radii);
+        }
+        else if (typeof radii === 'number') {
+            this.context.roundRectWithXYWidthHeightRadii(x, y, width, height, radii);
+        }
     }
+    removeHitRegion(id) { }
     resetTransform() {
         this.log('resetTransform');
         this._ensureLayoutBeforeDraw();
@@ -836,8 +850,7 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
             this.context.scale(x, y);
         }
     }
-    scrollPathIntoView(path) {
-    }
+    scrollPathIntoView(path) { }
     setLineDash(segments) {
         this.log('setLineDash', segments);
         this._ensureLayoutBeforeDraw();
@@ -867,10 +880,10 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         this.log('strokeText', text, x, y, maxWidth);
         this._ensureLayoutBeforeDraw();
         if (typeof maxWidth === 'number') {
-            this.context.strokeText(text, x, y, maxWidth);
+            this.context.strokeText(text + '', x, y, maxWidth);
         }
         else {
-            this.context.strokeText(text, x, y);
+            this.context.strokeText(text + '', x, y);
         }
     }
     transform(a, b, c, d, e, f) {