fix renderer

static/poseEditor.js

@@ -249,48 +249,54 @@ function rotateAndProject(f, p, c, angle) {
 }
 
 function drawBodyPose() {
-  const stickWidth = 6;
+  let stickWidth = 4;
+  let imageSize = Math.min(canvas.width, canvas.height);
+  stickWidth *= imageSize / 512;
 
   const colors = [[255, 0, 0], [255, 85, 0], [255, 170, 0], [255, 255, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0],
               [0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [0, 0, 255], [85, 0, 255],
               [170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]];
 
-  ctx.globalAlpha = 0.7;
+  ctx.globalAlpha = 0.6;
 
+  // edge
   for (let i = 0; i < poseData.length; i++) {
     const pose = poseData[i];
 
-    // edge
     for (let j = 0; j < 17; j++) {
       const p = pose[limbSeq[j][0]];
       const q = pose[limbSeq[j][1]];
       if (p == null || q == null) continue;
       const [X0, Y0] = p;
       const [X1, Y1] = q;
-      ctx.beginPath();
-      ctx.lineWidth=stickWidth;
-      ctx.strokeStyle = `rgb(${colors[j].join(',')})`;
-      ctx.moveTo(X0, Y0);
-      ctx.lineTo(X1, Y1);
-      ctx.stroke();
+      let angle = Math.atan2(Y1 - Y0, X1 - X0);
+      let magnitude = ((X0 - X1) ** 2 + (Y0 - Y1) ** 2) ** 0.5
+      let polygon = new Path2D();
+      polygon.ellipse((X0+X1)/2, (Y0+Y1)/2, magnitude / 2, stickWidth, angle, 0, 2 * Math.PI);
+      ctx.fillStyle = `rgb(${colors[j].join(',')})`;
+      ctx.fill(polygon);
     }
+  }
+
+  ctx.globalAlpha = 1.0;
+
+  // node
+  for (let i = 0; i < poseData.length; i++) {
+    const pose = poseData[i];
 
-    // node
     ctx.font = '12px serif';
     for (let j = 0; j < 18; j++) {
       const p = pose[j];
       if (p == null) continue;
       const [x, y] = p;
       ctx.beginPath();
-      ctx.arc(x, y, stickWidth*1.2, 0, 2 * Math.PI);
+      ctx.arc(x, y, stickWidth, 0, 2 * Math.PI);
       ctx.fillStyle = `rgb(${colors[j].join(',')})`;
       ctx.fill();
       // ctx.fillStyle = 'rgb(255,255,255)'
       // ctx.fillText(j, x-3, y+4);
     }
   }
-
-  ctx.globalAlpha = 1.0;
 }
 
 let lastWheeling = 0;