simplify canvas handling in nodejs

demo/nodejs/node-canvas.js

@@ -114,7 +114,7 @@ async function detect(input, output) {
   ctx.drawImage(original, 0, 0, outputCanvas.width, outputCanvas.height); // draw original to new canvas
 
   // draw human results on canvas
-  human.setCanvas(outputCanvas); // tell human to use this canvas
+  // human.setCanvas(outputCanvas); // tell human to use this canvas
   human.draw.all(outputCanvas, result); // human will draw results as overlays on canvas
 
   // write canvas to new image file

dist/human.node-gpu.js

@@ -10409,8 +10409,7 @@ __export(draw_exports, {
   hand: () => hand2,
   object: () => object,
   options: () => options2,
-  person: () => person,
+  person: () => person
-  setCanvas: () => setCanvas
 });
 var options2 = {
   color: "rgba(173, 216, 230, 0.6)",
@@ -10431,19 +10430,10 @@ var options2 = {
   useCurves: false,
   bufferedOutput: true
 };
-var Canvas;
+var getCanvasContext = (input) => {
-function setCanvas(obj) {
+  if (input && input.getContext)
-  if (obj.getContext)
+    return input.getContext("2d");
-    Canvas = obj;
+  throw new Error("Human: Invalid Canvas");
-  else
-    throw new Error("Human: Canvas is not functional");
-}
-var checkCanvas = (input) => {
-  if (typeof HTMLCanvasElement !== "undefined" && input instanceof HTMLCanvasElement)
-    return true;
-  if (typeof Canvas !== "undefined")
-    return true;
-  return false;
 };
 var rad2deg = (theta) => Math.round(theta * 180 / Math.PI);
 function point(ctx, x, y, z = 0, localOptions) {
@@ -10514,11 +10504,7 @@ async function gesture(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.font = localOptions.font;
   ctx.fillStyle = localOptions.color;
   let i = 1;
@@ -10544,11 +10530,7 @@ async function face2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   for (const f of result) {
     ctx.font = localOptions.font;
     ctx.strokeStyle = localOptions.color;
@@ -10654,11 +10636,7 @@ async function body2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   for (let i = 0; i < result.length; i++) {
     ctx.strokeStyle = localOptions.color;
@@ -10786,11 +10764,7 @@ async function hand2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -10854,11 +10828,7 @@ async function object(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -10883,11 +10853,7 @@ async function person(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (let i = 0; i < result.length; i++) {
@@ -10911,18 +10877,15 @@ async function person(inCanvas2, result, drawOptions) {
 async function canvas(inCanvas2, outCanvas2) {
   if (!inCanvas2 || !outCanvas2)
     return;
-  if (!checkCanvas(inCanvas2) || !checkCanvas(outCanvas2))
+  getCanvasContext(outCanvas2);
-    return;
+  const ctx = getCanvasContext(inCanvas2);
-  const outCtx = inCanvas2.getContext("2d");
+  ctx.drawImage(inCanvas2, 0, 0);
-  outCtx == null ? void 0 : outCtx.drawImage(inCanvas2, 0, 0);
 }
 async function all(inCanvas2, result, drawOptions) {
   const timestamp = now();
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return null;
-  if (!checkCanvas(inCanvas2))
-    return null;
   const promise = Promise.all([
     face2(inCanvas2, result.face, localOptions),
     body2(inCanvas2, result.body, localOptions),
@@ -11819,7 +11782,6 @@ var _Human = class {
     __privateAdd(this, _firstRun, void 0);
     __privateAdd(this, _lastInputSum, void 0);
     __privateAdd(this, _lastCacheDiff, void 0);
-    this.setCanvas = (canvas2) => setCanvas(canvas2);
     this.analyze = (...msg) => {
       if (!__privateGet(this, _analyzeMemoryLeaks))
         return;

dist/human.node-wasm.js

@@ -10410,8 +10410,7 @@ __export(draw_exports, {
   hand: () => hand2,
   object: () => object,
   options: () => options2,
-  person: () => person,
+  person: () => person
-  setCanvas: () => setCanvas
 });
 var options2 = {
   color: "rgba(173, 216, 230, 0.6)",
@@ -10432,19 +10431,10 @@ var options2 = {
   useCurves: false,
   bufferedOutput: true
 };
-var Canvas;
+var getCanvasContext = (input) => {
-function setCanvas(obj) {
+  if (input && input.getContext)
-  if (obj.getContext)
+    return input.getContext("2d");
-    Canvas = obj;
+  throw new Error("Human: Invalid Canvas");
-  else
-    throw new Error("Human: Canvas is not functional");
-}
-var checkCanvas = (input) => {
-  if (typeof HTMLCanvasElement !== "undefined" && input instanceof HTMLCanvasElement)
-    return true;
-  if (typeof Canvas !== "undefined")
-    return true;
-  return false;
 };
 var rad2deg = (theta) => Math.round(theta * 180 / Math.PI);
 function point(ctx, x, y, z = 0, localOptions) {
@@ -10515,11 +10505,7 @@ async function gesture(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.font = localOptions.font;
   ctx.fillStyle = localOptions.color;
   let i = 1;
@@ -10545,11 +10531,7 @@ async function face2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   for (const f of result) {
     ctx.font = localOptions.font;
     ctx.strokeStyle = localOptions.color;
@@ -10655,11 +10637,7 @@ async function body2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   for (let i = 0; i < result.length; i++) {
     ctx.strokeStyle = localOptions.color;
@@ -10787,11 +10765,7 @@ async function hand2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -10855,11 +10829,7 @@ async function object(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -10884,11 +10854,7 @@ async function person(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (let i = 0; i < result.length; i++) {
@@ -10912,18 +10878,15 @@ async function person(inCanvas2, result, drawOptions) {
 async function canvas(inCanvas2, outCanvas2) {
   if (!inCanvas2 || !outCanvas2)
     return;
-  if (!checkCanvas(inCanvas2) || !checkCanvas(outCanvas2))
+  getCanvasContext(outCanvas2);
-    return;
+  const ctx = getCanvasContext(inCanvas2);
-  const outCtx = inCanvas2.getContext("2d");
+  ctx.drawImage(inCanvas2, 0, 0);
-  outCtx == null ? void 0 : outCtx.drawImage(inCanvas2, 0, 0);
 }
 async function all(inCanvas2, result, drawOptions) {
   const timestamp = now();
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return null;
-  if (!checkCanvas(inCanvas2))
-    return null;
   const promise = Promise.all([
     face2(inCanvas2, result.face, localOptions),
     body2(inCanvas2, result.body, localOptions),
@@ -11820,7 +11783,6 @@ var _Human = class {
     __privateAdd(this, _firstRun, void 0);
     __privateAdd(this, _lastInputSum, void 0);
     __privateAdd(this, _lastCacheDiff, void 0);
-    this.setCanvas = (canvas2) => setCanvas(canvas2);
     this.analyze = (...msg) => {
       if (!__privateGet(this, _analyzeMemoryLeaks))
         return;

dist/human.node.js

@@ -10409,8 +10409,7 @@ __export(draw_exports, {
   hand: () => hand2,
   object: () => object,
   options: () => options2,
-  person: () => person,
+  person: () => person
-  setCanvas: () => setCanvas
 });
 var options2 = {
   color: "rgba(173, 216, 230, 0.6)",
@@ -10431,19 +10430,10 @@ var options2 = {
   useCurves: false,
   bufferedOutput: true
 };
-var Canvas;
+var getCanvasContext = (input) => {
-function setCanvas(obj) {
+  if (input && input.getContext)
-  if (obj.getContext)
+    return input.getContext("2d");
-    Canvas = obj;
+  throw new Error("Human: Invalid Canvas");
-  else
-    throw new Error("Human: Canvas is not functional");
-}
-var checkCanvas = (input) => {
-  if (typeof HTMLCanvasElement !== "undefined" && input instanceof HTMLCanvasElement)
-    return true;
-  if (typeof Canvas !== "undefined")
-    return true;
-  return false;
 };
 var rad2deg = (theta) => Math.round(theta * 180 / Math.PI);
 function point(ctx, x, y, z = 0, localOptions) {
@@ -10514,11 +10504,7 @@ async function gesture(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.font = localOptions.font;
   ctx.fillStyle = localOptions.color;
   let i = 1;
@@ -10544,11 +10530,7 @@ async function face2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   for (const f of result) {
     ctx.font = localOptions.font;
     ctx.strokeStyle = localOptions.color;
@@ -10654,11 +10636,7 @@ async function body2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   for (let i = 0; i < result.length; i++) {
     ctx.strokeStyle = localOptions.color;
@@ -10786,11 +10764,7 @@ async function hand2(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -10854,11 +10828,7 @@ async function object(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -10883,11 +10853,7 @@ async function person(inCanvas2, result, drawOptions) {
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return;
-  if (!checkCanvas(inCanvas2))
+  const ctx = getCanvasContext(inCanvas2);
-    return;
-  const ctx = inCanvas2.getContext("2d");
-  if (!ctx)
-    return;
   ctx.lineJoin = "round";
   ctx.font = localOptions.font;
   for (let i = 0; i < result.length; i++) {
@@ -10911,18 +10877,15 @@ async function person(inCanvas2, result, drawOptions) {
 async function canvas(inCanvas2, outCanvas2) {
   if (!inCanvas2 || !outCanvas2)
     return;
-  if (!checkCanvas(inCanvas2) || !checkCanvas(outCanvas2))
+  getCanvasContext(outCanvas2);
-    return;
+  const ctx = getCanvasContext(inCanvas2);
-  const outCtx = inCanvas2.getContext("2d");
+  ctx.drawImage(inCanvas2, 0, 0);
-  outCtx == null ? void 0 : outCtx.drawImage(inCanvas2, 0, 0);
 }
 async function all(inCanvas2, result, drawOptions) {
   const timestamp = now();
   const localOptions = mergeDeep(options2, drawOptions);
   if (!result || !inCanvas2)
     return null;
-  if (!checkCanvas(inCanvas2))
-    return null;
   const promise = Promise.all([
     face2(inCanvas2, result.face, localOptions),
     body2(inCanvas2, result.body, localOptions),
@@ -11819,7 +11782,6 @@ var _Human = class {
     __privateAdd(this, _firstRun, void 0);
     __privateAdd(this, _lastInputSum, void 0);
     __privateAdd(this, _lastCacheDiff, void 0);
-    this.setCanvas = (canvas2) => setCanvas(canvas2);
     this.analyze = (...msg) => {
       if (!__privateGet(this, _analyzeMemoryLeaks))
         return;

src/draw/draw.ts

@@ -66,17 +66,9 @@ export const options: DrawOptions = {
   bufferedOutput: <boolean>true,
 };
 
-let Canvas;
+const getCanvasContext = (input) => {
-
+  if (input && input.getContext) return input.getContext('2d');
-export function setCanvas(obj) {
+  throw new Error('Human: Invalid Canvas');
-  if (obj.getContext) Canvas = obj;
-  else throw new Error('Human: Canvas is not functional');
-}
-
-const checkCanvas = (input) => {
-  if ((typeof HTMLCanvasElement !== 'undefined') && (input instanceof HTMLCanvasElement)) return true;
-  if (typeof Canvas !== 'undefined') return true;
-  return false;
 };
 
 const rad2deg = (theta) => Math.round((theta * 180) / Math.PI);
@@ -150,9 +142,7 @@ function curves(ctx, points: [number, number, number?][] = [], localOptions) {
 export async function gesture(inCanvas: HTMLCanvasElement, result: Array<Gesture>, drawOptions?: DrawOptions) {
   const localOptions = mergeDeep(options, drawOptions);
   if (!result || !inCanvas) return;
-  if (!checkCanvas(inCanvas)) return;
+  const ctx = getCanvasContext(inCanvas);
-  const ctx = inCanvas.getContext('2d');
-  if (!ctx) return;
   ctx.font = localOptions.font;
   ctx.fillStyle = localOptions.color;
   let i = 1;
@@ -177,9 +167,7 @@ export async function gesture(inCanvas: HTMLCanvasElement, result: Array<Gesture
 export async function face(inCanvas: HTMLCanvasElement, result: Array<Face>, drawOptions?: DrawOptions) {
   const localOptions = mergeDeep(options, drawOptions);
   if (!result || !inCanvas) return;
-  if (!checkCanvas(inCanvas)) return;
+  const ctx = getCanvasContext(inCanvas);
-  const ctx = inCanvas.getContext('2d');
-  if (!ctx) return;
   for (const f of result) {
     ctx.font = localOptions.font;
     ctx.strokeStyle = localOptions.color;
@@ -281,9 +269,7 @@ export async function face(inCanvas: HTMLCanvasElement, result: Array<Face>, dra
 export async function body(inCanvas: HTMLCanvasElement, result: Array<Body>, drawOptions?: DrawOptions) {
   const localOptions = mergeDeep(options, drawOptions);
   if (!result || !inCanvas) return;
-  if (!checkCanvas(inCanvas)) return;
+  const ctx = getCanvasContext(inCanvas);
-  const ctx = inCanvas.getContext('2d');
-  if (!ctx) return;
   ctx.lineJoin = 'round';
   for (let i = 0; i < result.length; i++) {
     ctx.strokeStyle = localOptions.color;
@@ -393,9 +379,7 @@ export async function body(inCanvas: HTMLCanvasElement, result: Array<Body>, dra
 export async function hand(inCanvas: HTMLCanvasElement, result: Array<Hand>, drawOptions?: DrawOptions) {
   const localOptions = mergeDeep(options, drawOptions);
   if (!result || !inCanvas) return;
-  if (!checkCanvas(inCanvas)) return;
+  const ctx = getCanvasContext(inCanvas);
-  const ctx = inCanvas.getContext('2d');
-  if (!ctx) return;
   ctx.lineJoin = 'round';
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -459,9 +443,7 @@ export async function hand(inCanvas: HTMLCanvasElement, result: Array<Hand>, dra
 export async function object(inCanvas: HTMLCanvasElement, result: Array<Item>, drawOptions?: DrawOptions) {
   const localOptions = mergeDeep(options, drawOptions);
   if (!result || !inCanvas) return;
-  if (!checkCanvas(inCanvas)) return;
+  const ctx = getCanvasContext(inCanvas);
-  const ctx = inCanvas.getContext('2d');
-  if (!ctx) return;
   ctx.lineJoin = 'round';
   ctx.font = localOptions.font;
   for (const h of result) {
@@ -486,9 +468,7 @@ export async function object(inCanvas: HTMLCanvasElement, result: Array<Item>, d
 export async function person(inCanvas: HTMLCanvasElement, result: Array<Person>, drawOptions?: DrawOptions) {
   const localOptions = mergeDeep(options, drawOptions);
   if (!result || !inCanvas) return;
-  if (!checkCanvas(inCanvas)) return;
+  const ctx = getCanvasContext(inCanvas);
-  const ctx = inCanvas.getContext('2d');
-  if (!ctx) return;
   ctx.lineJoin = 'round';
   ctx.font = localOptions.font;
 
@@ -513,16 +493,15 @@ export async function person(inCanvas: HTMLCanvasElement, result: Array<Person>,
 
 export async function canvas(inCanvas: HTMLCanvasElement, outCanvas: HTMLCanvasElement) {
   if (!inCanvas || !outCanvas) return;
-  if (!checkCanvas(inCanvas) || !checkCanvas(outCanvas)) return;
+  getCanvasContext(outCanvas);
-  const outCtx = inCanvas.getContext('2d');
+  const ctx = getCanvasContext(inCanvas);
-  outCtx?.drawImage(inCanvas, 0, 0);
+  ctx.drawImage(inCanvas, 0, 0);
 }
 
 export async function all(inCanvas: HTMLCanvasElement, result: Result, drawOptions?: DrawOptions) {
   const timestamp = now();
   const localOptions = mergeDeep(options, drawOptions);
   if (!result || !inCanvas) return null;
-  if (!checkCanvas(inCanvas)) return null;
 
   const promise = Promise.all([
     face(inCanvas, result.face, localOptions),

src/human.ts

@@ -190,13 +190,6 @@ export class Human {
     this.#lastInputSum = 1;
   }
 
-  /**
-   * Sets internal canvas methods
-   *
-   * @param canvas
-   */
-  setCanvas = (canvas) => draw.setCanvas(canvas);
-
   // helper function: measure tensor leak
   /** @hidden */
   analyze = (...msg: string[]) => {