graphics-wrapper - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

index.js

 const Canvas = require("canvas");
 
-//Context
+//  CONTEXT
 
+/**
+ * @type {CanvasRenderingContext2D}
+ */
 let ctx;
+
+/**
+ * Set Context
+ * @param {CanvasRenderingContext2D} context
+ */
 module.exports.setContext = function(context) {
@@ -10,4 +18,12 @@ ctx = context;
 
-//Shadow
+//  SHADOW
 
+
+/**
+ * 
+ * @param {string} color
+ * @param {Number} blur
+ * @param {Number} x
+ * @param {Number} y
+ */
 module.exports.setShadow = function(color, blur, x, y) {
@@ -20,4 +36,9 @@ ctx.shadowColor = color;
 
-//Draw
+//  DRAW
 
+
+/**
+ * Fill current path
+ * @param {string} color
+ */
 module.exports.drawFill = function(color) {
@@ -28,10 +49,21 @@ ctx.fillStyle = color;
 
-module.exports.drawStroke = function(color, strokeWidth) {
+/**
+ * Outline current path
+ * @param {string} color
+ * @param {Number} stroke
+ */
+module.exports.drawStroke = function(color, stroke) {
     ctx.strokeStyle = color;
-    ctx.strokeWidth = strokeWidth;
+    ctx.strokeWidth = stroke;
     ctx.stroke();
 };
 
-//Circle
+//  CIRCLE
 
+/**
+ * Create circle path
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ */
 module.exports.pathCircle = function(x, y, radius) {
@@ -43,2 +75,9 @@ ctx.beginPath();
 
+/**
+ * Draw filled circle
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ */
 module.exports.drawCircleFill = function(color, x, y, radius) {
@@ -52,7 +91,15 @@ ctx.save();
 
-module.exports.drawCircleStroke = function(color, x, y, radius, strokeWidth) {
+/**
+ * Draw circle outline
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @param {Number} stroke
+ */
+module.exports.drawCircleStroke = function(color, x, y, radius, stroke) {
     ctx.save();
     module.exports.pathCircle(x, y, radius);
     ctx.strokeStyle = color;
-    ctx.strokeWidth = strokeWidth;
+    ctx.strokeWidth = stroke;
     ctx.stroke();
@@ -62,12 +109,19 @@ ctx.restore();
 
-//Rectangle
+//  RECTANGLE
 
-module.exports.pathRect = function(x, y, width, height) {
-    width += x;
-    height += y;
+/**
+ * Create rectangle path
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ */
+module.exports.pathRect = function(x, y, w, h) {
+    w += x;
+    h += y;
     ctx.beginPath();
     ctx.moveTo(x,y);
-    ctx.lineTo(width,y);
-    ctx.lineTo(width,height);
-    ctx.lineTo(x,height);
+    ctx.lineTo(w,y);
+    ctx.lineTo(w,h);
+    ctx.lineTo(x,h);
     ctx.lineTo(x,y);
@@ -77,6 +131,14 @@ ctx.closePath();
 
-module.exports.pathRoundedRect = function(x, y, width, height, indent) {
-    width += x;
-    height += y;
-    const shortest = Math.min(width,height) / 2;
+/**
+ * Create rounded rectangle path
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Number} indent
+ */
+module.exports.pathRoundedRect = function(x, y, w, h, indent) {
+    w += x;
+    h += y;
+    const shortest = Math.min(w,h) / 2;
     if (indent < 1) indent *= shortest;
@@ -86,8 +148,8 @@ else indent = Math.min(indent, shortest);
     ctx.moveTo(x+indent,y);
-    ctx.lineTo(width-indent,y);
-    ctx.quadraticCurveTo(width,y,width,y+indent);
-    ctx.lineTo(width,height-indent);
-    ctx.quadraticCurveTo(width,height,width-indent,height);
-    ctx.lineTo(x+indent,height);
-    ctx.quadraticCurveTo(x,height,x,height-indent);
+    ctx.lineTo(w-indent,y);
+    ctx.quadraticCurveTo(w,y,w,y+indent);
+    ctx.lineTo(w,h-indent);
+    ctx.quadraticCurveTo(w,h,w-indent,h);
+    ctx.lineTo(x+indent,h);
+    ctx.quadraticCurveTo(x,h,x,h-indent);
     ctx.lineTo(x,y+indent);
@@ -98,25 +160,74 @@ ctx.quadraticCurveTo(x,y,x+indent,y);
 
-module.exports.drawRectFill = function(color, x, y, width, height) {
-    module.exports.pathRect(x, y, width, height);
+/**
+ * Draw filled rectangle
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ */
+module.exports.drawRectFill = function(color, x, y, w, h) {
+    module.exports.pathRect(x, y, w, h);
     module.exports.drawFill(color);
 };
 
-module.exports.drawRectStroke = function(color, x, y, width, height, strokeWidth) {
-    module.exports.pathRect(x, y, width, height);
-    module.exports.drawStroke(color, strokeWidth);
+/**
+ * Draw rectangle outline
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Number} stroke
+ */
+module.exports.drawRectStroke = function(color, x, y, w, h, stroke) {
+    module.exports.pathRect(x, y, w, h);
+    module.exports.drawStroke(color, stroke);
 };
 
-module.exports.drawRoundedRectFill = function(color, x, y, width, height, indent) {
-    module.exports.pathRoundedRect(x, y, width, height, indent);
-    module.exports.drawFill(color, x, y, width, height);
+/**
+ * Draw filled rounded rectangle
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Number} indent
+ */
+module.exports.drawRoundedRectFill = function(color, x, y, w, h, indent) {
+    module.exports.pathRoundedRect(x, y, w, h, indent);
+    module.exports.drawFill(color, x, y, w, h);
 };
 
-module.exports.drawRoundedRectStroke = function(color, x, y, width, height, indent, strokeWidth) {
-    module.exports.pathRoundedRect(x, y, width, height, indent);
-    module.exports.drawStroke(color, x, y, width, height, strokeWidth);
+/**
+ * Draw rounded rectangle outline
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Number} indent
+ * @param {Number} stroke
+ */
+module.exports.drawRoundedRectStroke = function(color, x, y, w, h, indent, stroke) {
+    module.exports.pathRoundedRect(x, y, w, h, indent);
+    module.exports.drawStroke(color, x, y, w, h, stroke);
 };
 
-//Text
+//  TEXT
 
-module.exports.drawTextFill = function(text, font, size, color, x, y, align, baseline, width, height) {
+/**
+ * Draws filled text (auto scales when using w and h controls)
+ * @param {string} text
+ * @param {string} font
+ * @param {Number} size
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {string} align
+ * @param {string} baseline
+ * @param {Number} w
+ * @param {Number} h
+ */
+module.exports.drawTextFill = function(text, font, size, color, x, y, align, baseline, w, h) {
     if (!align) align = "left";
@@ -128,4 +239,4 @@ if (!baseline) baseline = "middle";
     ctx.textBaseline = baseline;
-    if (width && height)
-        while (ctx.measureText(text).width >= width || ctx.measureText(text).actualBoundingBoxAscent + ctx.measureText(text).actualBoundingBoxDescent >= height)
+    if (w && h)
+        while (ctx.measureText(text).width >= w || ctx.measureText(text).actualBoundingBoxAscent + ctx.measureText(text).actualBoundingBoxDescent >= h)
             ctx.font = `${size-=1}px ${font}`;
@@ -135,3 +246,17 @@ ctx.fillText(text, x, y);
 
-module.exports.drawTextStroke = function(text, font, size, color, x, y, strokeWidth, align, baseline, maxWidth, maxHeight) {
+/**
+ * Draws text outline (auto scales when using w and h controls)
+ * @param {string} text
+ * @param {string} font
+ * @param {Number} size
+ * @param {string} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} stroke
+ * @param {string} align
+ * @param {string} baseline
+ * @param {Number} w
+ * @param {Number} h
+ */
+module.exports.drawTextStroke = function(text, font, size, color, x, y, stroke, align, baseline, w, h) {
     if (!align) align = "left";
@@ -143,7 +268,35 @@ if (!baseline) baseline = "middle";
     ctx.textBaseline = baseline;
-    if (width && height)
-        while (ctx.measureText(text).width >= maxWidth || ctx.measureText(text).actualBoundingBoxAscent + ctx.measureText(text).actualBoundingBoxDescent >= maxHeight)
+    if (w && h)
+        while (ctx.measureText(text).width >= w || ctx.measureText(text).actualBoundingBoxAscent + ctx.measureText(text).actualBoundingBoxDescent >= h)
             ctx.font = `${size-=1}px ${font}`;
-    ctx.strokeWidth = width;
+    ctx.strokeWidth = w;
     ctx.strokeText(text, x, y);
+};
+
+//  IMAGE
+
+/**
+ * Slice an image into 9 parts and scale the center parts
+ * @param {Image} image
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Number} dx
+ * @param {Number} dy
+ */
+module.exports.drawNineSlice = function(image, x, y, w, h, dx, dy) {
+    const iw = image.width;
+    const ih = image.height;
+    if (!dx) dx = Math.floor(iw / 3);
+    if (!dy) dy = Math.floor(ih / 3);
+    ctx.drawImage(image, 0, 0, dx, dy, x, y, dx, dy);
+    ctx.drawImage(image, dx, 0, iw-dx*2, dy, x+dx, y, w-dx*2, dy);
+    ctx.drawImage(image, iw-dx, 0, dx, dy, x+w-dx, y, dx, dy);
+    ctx.drawImage(image, 0, dy, dx, ih-dy*2, x, y+dy, dx, h-dy*2);
+    ctx.drawImage(image, dx, dy, iw-dx*2, ih-dy*2, x+dx, y+dy, w-dx*2, h-dy*2);
+    ctx.drawImage(image, iw-dx, dy, dx, ih-dy*2, x+w-dx, y+dy, dx, h-dy*2);
+    ctx.drawImage(image, 0, ih-dy, dx, dy, x, y+h-dx, dx, dy);
+    ctx.drawImage(image, dx, ih-dy, iw-dx*2, dy, x+dx, y+h-dx, w-dx*2, dy);
+    ctx.drawImage(image, iw-dx, ih-dy, dx, dy, x+w-dx, y+h-dx, dx, dy);
 };

package.json

 {
   "name": "graphics-wrapper",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A wrapper for node-canvas",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,7 +0,6 @@
-## graphics-wrapper
+
+# graphics-wrapper
 
 A wrapper for node-canvas
 
-``npm install graphics-wrapper``
-
 ## USAGE
@@ -8,0 +7,0 @@

test.js

@@ -5,10 +5,16 @@ const fs = require('fs');
 
-const canvas = Canvas.createCanvas(500, 500);
-const ctx = canvas.getContext('2d');
+(async function() {
+	const canvas = Canvas.createCanvas(500, 500);
+	const ctx = canvas.getContext('2d');
 
-Draw.setContext(ctx);
-Draw.drawRectFill('black', 0, 0, canvas.width, canvas.height);
-Draw.drawRoundedRectFill('white', 50, 50, canvas.width - 100, canvas.height - 100, 50);
+	Draw.setContext(ctx);
+	Draw.drawRectFill('black', 0, 0, canvas.width, canvas.height);
+	Draw.drawRoundedRectFill('white', 20, 20, canvas.width - 40, canvas.height - 40, 50);
+	Draw.setShadow('black',7,6, 4);
+	Draw.drawTextFill("graphics", "sans-serif", 80, 'blue', canvas.width/2, canvas.height/2-100, "center", "middle");
+	Draw.drawTextFill("wrapper", "sans-serif", 80, 'blue', canvas.width/2, canvas.height/2, "center", "middle");
+	Draw.drawTextFill("test", "sans-serif", 80, 'blue', canvas.width/2, canvas.height/2+100, "center", "middle");
 
-let buffer = canvas.toBuffer();
-fs.writeFileSync("test.png", buffer);
+	let buffer = canvas.toBuffer();
+	fs.writeFileSync("test.png", buffer);
+})();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9057

increased by66.31%

Lines of code

278

increased by124.19%

Worsened metrics

Number of lines in readme file

16

decreased by-5.88%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes