canvas-elements - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

build/cdn/canvas-elements.min.js

@@ -1,2 +0,2 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self)["canvas-elements"]={})}(this,function(t){"use strict";var s=function(t,i){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,i){t.__proto__=i}||function(t,i){for(var r in i)i.hasOwnProperty(r)&&(t[r]=i[r])})(t,i)};function i(t,i){function r(){this.constructor=t}s(t,i),t.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}var r=function(){function t(t,i,r,s,o,h,e){if(void 0===r&&(r=0),void 0===s&&(s="#000"),void 0===o&&(o=0),void 0===h&&(h="#000"),!t)throw new Error("X coordinate is not defined");if(!i)throw new Error("Y coordinate is not defined");if(!e)throw new Error("Canvas rendering context is not defined");this.x=t,this.y=i,this.rotation=r,this.background=s,this.borderWidth=o,this.borderColor=h,this.ctx=e}return t.prototype.rotate=function(t,i,r){void 0===r&&(r=!0),this.ctx.translate(t,i),this.ctx.rotate((r?1:-1)*this.rotation),this.ctx.translate(-t,-i)},t}(),o=function(l){function t(t){var i=this,r=t.x,s=t.y,o=t.radiusX,h=t.radiusY,e=t.rotation,n=void 0===e?0:e,c=t.background,d=t.borderColor,a=t.borderWidth,x=t.ctx;return(i=l.call(this,r,s,n,c,a,d,x)||this).radiusX=o,i.radiusY=h,i.draw(),i}return i(t,l),t.prototype.draw=function(){this.ctx.beginPath(),this.ctx.ellipse(this.x,this.y,this.radiusX,this.radiusY,this.rotation,0,2*Math.PI,!1),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill(),this.ctx.closePath()},t}(r),h=function(c){function t(t){var i=t.x,r=t.y,s=t.r,o=t.background,h=t.borderColor,e=t.borderWidth,n=t.ctx;return c.call(this,{x:i,y:r,radiusX:s,radiusY:s,rotation:0,background:o,borderColor:h,borderWidth:e,ctx:n})||this}return i(t,c),t}(o),e=function(f){function t(t){var i=t.x,r=t.y,s=t.w,o=t.h,h=t.r,e=void 0===h?0:h,n=t.rotation,c=void 0===n?0:n,d=t.borderColor,a=t.background,x=t.borderWidth,l=t.ctx,u=f.call(this,i,r,c,a,x,d,l)||this;return u.r=e,u.w=s,u.h=o,u.draw(),u}return i(t,f),t.prototype.draw=function(){this.rotate(this.w/2+this.x,this.h/2+this.y),this.w<2*this.r&&(this.r=this.w/2),this.h<2*this.r&&(this.r=this.h/2),this.ctx.beginPath(),this.ctx.moveTo(this.x+this.r,this.y),this.ctx.arcTo(this.x+this.w,this.y,this.x+this.w,this.y+this.h,this.r),this.ctx.arcTo(this.x+this.w,this.y+this.h,this.x,this.y+this.h,this.r),this.ctx.arcTo(this.x,this.y+this.h,this.x,this.y,this.r),this.ctx.arcTo(this.x,this.y,this.x+this.w,this.y,this.r),this.ctx.closePath(),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill(),this.rotate(this.w/2+this.x,this.h/2+this.y,!1)},t}(r),n=function(k){function t(t){var i=this,r=t.x,s=t.y,o=t.size,h=void 0===o?18:o,e=t.rotation,n=void 0===e?0:e,c=t.font,d=void 0===c?"Arial":c,a=t.background,x=t.align,l=void 0===x?"left":x,u=t.baseline,f=void 0===u?"middle":u,y=t.text,b=t.ctx,p=t.borderColor,w=t.borderWidth,v=t.weight,g=void 0===v?"400":v;return(i=k.call(this,r,s,n,a,w,p,b)||this).size=h,i.font=d,i.background=a,i.align=l,i.baseline=f,i.weight=g,i.text=y,i.draw(),i}return i(t,k),t.prototype.draw=function(){this.rotate(this.x,this.y),this.ctx.font=this.weight+" "+this.size+"px "+this.font,this.ctx.fillStyle=this.background,this.ctx.textAlign=this.align,this.ctx.textBaseline=this.baseline,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.strokeText(this.text,this.x,this.y)),this.ctx.fillText(this.text,this.x,this.y),this.rotate(this.x,this.y,!1)},t}(r),c=function(b){function t(t){var i=this,r=t.x,s=t.y,o=t.x2,h=t.y2,e=t.r,n=t.angle,c=t.rotation,d=void 0===c?0:c,a=t.background,x=t.borderColor,l=t.borderWidth,u=t.lineCap,f=void 0===u?"square":u,y=t.ctx;if(i=b.call(this,r,s,d,a||x,l,x,y)||this,"number"==typeof o&&"number"==typeof h)i.x2=o,i.y2=h;else{if("number"!=typeof e||"number"!=typeof n)throw new Error("Insufficient values to draw a line");i.x2=i.x+e*Math.cos(n),i.y2=i.y+e*Math.sin(n)}return i.lineCap=f,i.draw(),i}return i(t,b),t.prototype.draw=function(){var t=(this.x+this.x2)/2,i=(this.y+this.y2)/2;this.rotate(t,i),this.ctx.beginPath(),this.ctx.moveTo(this.x,this.y),this.ctx.lineTo(this.x2,this.y2),this.borderWidth&&(this.ctx.lineCap=this.lineCap,this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.background),this.ctx.stroke(),this.rotate(t,i,!1)},t}(r);window.CanvasElements={Circle:h,Rect:e,Text:n,Ellipse:o,Line:c},t.Circle=h,t.Rect=e,t.Text=n,t.Ellipse=o,t.Line=c,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self)["canvas-elements"]={})}(this,function(t){"use strict";var s=function(t,i){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,i){t.__proto__=i}||function(t,i){for(var r in i)i.hasOwnProperty(r)&&(t[r]=i[r])})(t,i)};function i(t,i){function r(){this.constructor=t}s(t,i),t.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}var r=function(){function t(t,i,r,s,e,o,h,n){if(void 0===r&&(r=0),void 0===s&&(s="#000"),void 0===e&&(e=0),void 0===o&&(o="#000"),void 0===h&&(h="solid"),!t)throw new Error("X coordinate is not defined");if(!i)throw new Error("Y coordinate is not defined");if(!n)throw new Error("Canvas rendering context is not defined");this.x=t,this.y=i,this.rotation=r,this.background=s,this.borderWidth=e,this.borderColor=o,this.borderStyle=h,this.ctx=n}return t.prototype.rotate=function(t,i,r){void 0===r&&(r=!0),this.ctx.translate(t,i),this.ctx.rotate((r?1:-1)*this.rotation),this.ctx.translate(-t,-i)},t.prototype.draw=function(){if("string"==typeof this.borderStyle)switch(this.borderStyle){case"dotted":this.ctx.setLineDash([1,2*this.borderWidth]);break;case"dashed":this.ctx.setLineDash([8,10]);break;default:this.ctx.setLineDash([])}else Array.isArray(this.borderStyle)&&this.ctx.setLineDash(this.borderStyle)},t}(),e=function(y){function t(t){var i=this,r=t.x,s=t.y,e=t.radiusX,o=t.radiusY,h=t.rotation,n=void 0===h?0:h,d=t.background,a=t.borderColor,c=t.borderWidth,l=t.borderStyle,x=t.ctx;return(i=y.call(this,r,s,n,d,c,a,l,x)||this).radiusX=e,i.radiusY=o,i.draw(),i}return i(t,y),t.prototype.draw=function(){y.prototype.draw.call(this),this.ctx.beginPath(),this.ctx.ellipse(this.x,this.y,this.radiusX,this.radiusY,this.rotation,0,2*Math.PI,!1),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill(),this.ctx.closePath()},t}(r),o=function(a){function t(t){var i=t.x,r=t.y,s=t.r,e=t.background,o=t.borderColor,h=t.borderWidth,n=t.borderStyle,d=t.ctx;return a.call(this,{x:i,y:r,radiusX:s,radiusY:s,rotation:0,background:e,borderColor:o,borderWidth:h,borderStyle:n,ctx:d})||this}return i(t,a),t}(e),h=function(f){function t(t){var i=t.x,r=t.y,s=t.w,e=t.h,o=t.r,h=void 0===o?0:o,n=t.rotation,d=void 0===n?0:n,a=t.borderColor,c=t.background,l=t.borderWidth,x=t.borderStyle,y=t.ctx,u=f.call(this,i,r,d,c,l,a,x,y)||this;return u.r=h,u.w=s,u.h=e,u.draw(),u}return i(t,f),t.prototype.draw=function(){f.prototype.draw.call(this),this.rotate(this.w/2+this.x,this.h/2+this.y),this.w<2*this.r&&(this.r=this.w/2),this.h<2*this.r&&(this.r=this.h/2),this.ctx.beginPath(),this.ctx.moveTo(this.x+this.r,this.y),this.ctx.arcTo(this.x+this.w,this.y,this.x+this.w,this.y+this.h,this.r),this.ctx.arcTo(this.x+this.w,this.y+this.h,this.x,this.y+this.h,this.r),this.ctx.arcTo(this.x,this.y+this.h,this.x,this.y,this.r),this.ctx.arcTo(this.x,this.y,this.x+this.w,this.y,this.r),this.ctx.closePath(),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill(),this.rotate(this.w/2+this.x,this.h/2+this.y,!1)},t}(r),n=function(W){function t(t){var i=this,r=t.x,s=t.y,e=t.size,o=void 0===e?18:e,h=t.rotation,n=void 0===h?0:h,d=t.font,a=void 0===d?"Arial":d,c=t.background,l=t.align,x=void 0===l?"left":l,y=t.baseline,u=void 0===y?"middle":y,f=t.text,b=t.ctx,p=t.borderColor,w=t.borderWidth,v=t.borderStyle,g=t.weight,k=void 0===g?"400":g;return(i=W.call(this,r,s,n,c,w,p,v,b)||this).size=o,i.font=a,i.background=c,i.align=x,i.baseline=u,i.weight=k,i.text=f,i.draw(),i}return i(t,W),t.prototype.draw=function(){W.prototype.draw.call(this),this.rotate(this.x,this.y),this.ctx.font=this.weight+" "+this.size+"px "+this.font,this.ctx.fillStyle=this.background,this.ctx.textAlign=this.align,this.ctx.textBaseline=this.baseline,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.strokeText(this.text,this.x,this.y)),this.ctx.fillText(this.text,this.x,this.y),this.rotate(this.x,this.y,!1)},t}(r),d=function(p){function t(t){var i=this,r=t.x,s=t.y,e=t.x2,o=t.y2,h=t.r,n=t.angle,d=t.rotation,a=void 0===d?0:d,c=t.background,l=t.borderColor,x=t.borderWidth,y=t.borderStyle,u=t.lineCap,f=void 0===u?"square":u,b=t.ctx;if(i=p.call(this,r,s,a,c||l,x,l,y,b)||this,"number"==typeof e&&"number"==typeof o)i.x2=e,i.y2=o;else{if("number"!=typeof h||"number"!=typeof n)throw new Error("Insufficient values to draw a line");i.x2=i.x+h*Math.cos(n),i.y2=i.y+h*Math.sin(n)}return i.lineCap=f,i.draw(),i}return i(t,p),t.prototype.draw=function(){p.prototype.draw.call(this);var t=(this.x+this.x2)/2,i=(this.y+this.y2)/2;this.rotate(t,i),this.ctx.beginPath(),this.ctx.moveTo(this.x,this.y),this.ctx.lineTo(this.x2,this.y2),this.borderWidth&&(this.ctx.lineCap=this.lineCap,this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.background),this.ctx.stroke(),this.rotate(t,i,!1)},t}(r);window.CanvasElements={Circle:o,Rect:h,Text:n,Ellipse:e,Line:d},t.Circle=o,t.Rect=h,t.Text=n,t.Ellipse=e,t.Line=d,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=canvas-elements.min.js.map

build/index.js

@@ -8,2 +8,3 @@ "use strict";
 exports.Ellipse = simple_1.Ellipse;
+exports.Line = simple_1.Line;
 window.CanvasElements = {
@@ -13,3 +14,4 @@ Circle: simple_1.Circle,
     Text: simple_1.Text,
-    Ellipse: simple_1.Ellipse
+    Ellipse: simple_1.Ellipse,
+    Line: simple_1.Line,
 } || {};

build/simple/circle.js

@@ -27,2 +27,3 @@ "use strict";
      * @param {number} options.borderWidth border width
+     * @param {string} options.borderStyle border style
      * @param {CanvasRenderingContext2D} options.ctx canvas context where circle would be drawn
@@ -32,3 +33,3 @@ */
         var _this = this;
-        var x = options.x, y = options.y, r = options.r, background = options.background, borderColor = options.borderColor, borderWidth = options.borderWidth, ctx = options.ctx;
+        var x = options.x, y = options.y, r = options.r, background = options.background, borderColor = options.borderColor, borderWidth = options.borderWidth, borderStyle = options.borderStyle, ctx = options.ctx;
         _this = _super.call(this, {
@@ -39,3 +40,5 @@ x: x, y: y,
             rotation: 0,
-            background: background, borderColor: borderColor, borderWidth: borderWidth, ctx: ctx
+            background: background, borderColor: borderColor, borderWidth: borderWidth,
+            borderStyle: borderStyle,
+            ctx: ctx
         }) || this;
@@ -42,0 +45,0 @@ return _this;

build/simple/ellipse.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var Ellipse = /** @class */ (function () {
+var base_1 = require("./base");
+var Ellipse = /** @class */ (function (_super) {
+    __extends(Ellipse, _super);
     /**
-     * @param {Object} options options to create a circle
-     * @param {number} options.x x coordinate of the circle
-     * @param {number} options.y y coordinate of the circle
-     * @param {number} options.r radius of the circle
+     * @param {Object} options options to create an ellipse
+     * @param {number} options.x x coordinate of the ellipse
+     * @param {number} options.y y coordinate of the ellipse
+     * @param {number} options.radiusX horizontal radius of the ellipse
+     * @param {number} options.radiusY vertical radius of the ellipse
      * @param {string} options.background fill color
      * @param {string} options.borderColor border color
      * @param {number} options.borderWidth border width
-     * @param {CanvasRenderingContext2D} options.ctx canvas context where circle would be drawn
+     * @param {string} options.borderStyle border style
+     * @param {CanvasRenderingContext2D} options.ctx canvas context where ellipse would be drawn
      */
     function Ellipse(options) {
-        var x = options.x, y = options.y, radiusX = options.radiusX, radiusY = options.radiusY, rotation = options.rotation, background = options.background, borderColor = options.borderColor, borderWidth = options.borderWidth, ctx = options.ctx;
-        this.x = x;
-        this.y = y;
-        this.radiusX = radiusX;
-        this.radiusY = radiusY;
-        this.rotation = rotation || 0;
-        this.background = background || 'black';
-        this.borderColor = borderColor;
-        this.borderWidth = borderWidth || 0;
-        this.ctx = ctx;
-        this.draw();
+        var _this = this;
+        var x = options.x, y = options.y, radiusX = options.radiusX, radiusY = options.radiusY, _a = options.rotation, rotation = _a === void 0 ? 0 : _a, background = options.background, borderColor = options.borderColor, borderWidth = options.borderWidth, borderStyle = options.borderStyle, ctx = options.ctx;
+        _this = _super.call(this, x, y, rotation, background, borderWidth, borderColor, borderStyle, ctx) || this;
+        _this.radiusX = radiusX;
+        _this.radiusY = radiusY;
+        _this.draw();
+        return _this;
     }
     Ellipse.prototype.draw = function () {
+        _super.prototype.draw.call(this);
         this.ctx.beginPath();
@@ -40,4 +54,4 @@ this.ctx.ellipse(this.x, this.y, this.radiusX, this.radiusY, this.rotation, 0, 2 * Math.PI, false);
     return Ellipse;
-}());
+}(base_1.Element));
 exports.default = Ellipse;
 ;

build/simple/index.js

@@ -11,1 +11,3 @@ "use strict";
 exports.Ellipse = ellipse_1.default;
+var line_1 = require("./line");
+exports.Line = line_1.default;

build/simple/rect.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var Rect = /** @class */ (function () {
+var base_1 = require("./base");
+var Rect = /** @class */ (function (_super) {
+    __extends(Rect, _super);
     /**
@@ -15,18 +30,18 @@ *
      * @param {number} options.borderWidth border width
+     * @param {string} options.borderStyle border style
      * @param {CanvasRenderingContext2D} options.ctx canvas context where rectangle would be drawn
      */
     function Rect(_a) {
-        var x = _a.x, y = _a.y, w = _a.w, h = _a.h, r = _a.r, borderColor = _a.borderColor, _b = _a.background, background = _b === void 0 ? '#000' : _b, _c = _a.borderWidth, borderWidth = _c === void 0 ? 0 : _c, ctx = _a.ctx;
-        this.x = x;
-        this.y = y;
-        this.r = r;
-        this.w = w;
-        this.h = h;
-        this.background = background;
-        this.borderColor = borderColor;
-        this.borderWidth = borderWidth;
-        this.ctx = ctx;
-        this.draw();
+        var x = _a.x, y = _a.y, w = _a.w, h = _a.h, _b = _a.r, r = _b === void 0 ? 0 : _b, _c = _a.rotation, rotation = _c === void 0 ? 0 : _c, borderColor = _a.borderColor, background = _a.background, borderWidth = _a.borderWidth, borderStyle = _a.borderStyle, ctx = _a.ctx;
+        var _this = _super.call(this, x, y, rotation, background, borderWidth, borderColor, borderStyle, ctx) || this;
+        _this.r = r;
+        _this.w = w;
+        _this.h = h;
+        _this.draw();
+        return _this;
     }
     Rect.prototype.draw = function () {
+        _super.prototype.draw.call(this);
+        // Initial rotation about the center of the rectangle
+        this.rotate(this.w / 2 + this.x, this.h / 2 + this.y);
         if (this.w < 2 * this.r)
@@ -50,5 +65,7 @@ this.r = this.w / 2;
         this.ctx.fill();
+        // Rotate the canvas back to its original state
+        this.rotate(this.w / 2 + this.x, this.h / 2 + this.y, false);
     };
     return Rect;
-}());
+}(base_1.Element));
 exports.default = Rect;

build/simple/text.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var Text = /** @class */ (function () {
+var base_1 = require("./base");
+var Text = /** @class */ (function (_super) {
+    __extends(Text, _super);
     /**
@@ -15,19 +30,25 @@ * @param {Object} options options to create text
      * @param {string} options.text text to be shown
-     * @param {CanvasRenderingContext2D} options.ctx canvas context where circle would be drawn
+     * @param {string} options.borderColor border color
+     * @param {number} options.borderWidth border width
+     * @param {string} options.borderStyle border style
+     * @param {CanvasRenderingContext2D} options.ctx canvas context where text would be drawn
      */
     function Text(options) {
-        var x = options.x, y = options.y, size = options.size, _a = options.font, font = _a === void 0 ? 'Arial' : _a, _b = options.background, background = _b === void 0 ? '#000' : _b, _c = options.align, align = _c === void 0 ? 'left' : _c, _d = options.baseline, baseline = _d === void 0 ? 'middle' : _d, text = options.text, ctx = options.ctx, _e = options.weight, weight = _e === void 0 ? '400' : _e;
-        this.x = x;
-        this.y = y;
-        this.size = size;
-        this.font = font;
-        this.background = background;
-        this.align = align;
-        this.baseline = baseline;
-        this.weight = weight;
-        this.text = text;
-        this.ctx = ctx;
-        this.draw();
+        var _this = this;
+        var x = options.x, y = options.y, _a = options.size, size = _a === void 0 ? 18 : _a, _b = options.rotation, rotation = _b === void 0 ? 0 : _b, _c = options.font, font = _c === void 0 ? 'Arial' : _c, background = options.background, _d = options.align, align = _d === void 0 ? 'left' : _d, _e = options.baseline, baseline = _e === void 0 ? 'middle' : _e, text = options.text, ctx = options.ctx, borderColor = options.borderColor, borderWidth = options.borderWidth, borderStyle = options.borderStyle, _f = options.weight, weight = _f === void 0 ? '400' : _f;
+        _this = _super.call(this, x, y, rotation, background, borderWidth, borderColor, borderStyle, ctx) || this;
+        _this.size = size;
+        _this.font = font;
+        _this.background = background;
+        _this.align = align;
+        _this.baseline = baseline;
+        _this.weight = weight;
+        _this.text = text;
+        _this.draw();
+        return _this;
     }
     Text.prototype.draw = function () {
+        _super.prototype.draw.call(this);
+        // Initial rotation about the starting point of text
+        this.rotate(this.x, this.y);
         this.ctx.font = this.weight + " " + this.size + "px " + this.font;
@@ -37,6 +58,16 @@ this.ctx.fillStyle = this.background;
         this.ctx.textBaseline = this.baseline;
+        /**
+         * Set the border for the text element
+         */
+        if (this.borderWidth) {
+            this.ctx.lineWidth = this.borderWidth;
+            this.ctx.strokeStyle = this.borderColor;
+            this.ctx.strokeText(this.text, this.x, this.y);
+        }
         this.ctx.fillText(this.text, this.x, this.y);
+        // Rotate the canvas back to its original state
+        this.rotate(this.x, this.y, false);
     };
     return Text;
-}());
+}(base_1.Element));
 exports.default = Text;

package.json

 {
   "name": "canvas-elements",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Collection of easy to use elements with HTML5 Canvas",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

 # Canvas Elements
-[![Release](https://badgen.net/github/release/blenderskool/canvas-elements?color=orange)](https://npmjs.com/package/canvas-elements)
+[![Release](https://badgen.net/npm/v/canvas-elements?label=release)](https://npmjs.com/package/canvas-elements)
 [![Size](https://badgen.net/bundlephobia/min/canvas-elements?color=green)](https://npmjs.com/package/canvas-elements)
@@ -181,2 +181,2 @@ [![License](https://badgen.net/github/license/blenderskool/canvas-elements)](https://github.com/blenderskool/canvas-elements/blob/master/LICENSE)
 ## License
-This project is under [MIT License](https://github.com/blenderskool/canvas-elements/blob/master/LICENSE)
+This project is under [MIT License](https://github.com/blenderskool/canvas-elements/blob/master/LICENSE)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49882

increased by32.01%

Number of package files

14

increased by16.67%

Lines of code

441

increased by96.88%

Number of lines in readme file

182

increased by0.55%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes