Path2D draw & custom lines

1import { ApexPainter } from 'apexify.js';2 3const painter = new ApexPainter();

1const path = painter.path2d.create([2  { type: 'roundedRect', x: 24, y: 24, width: 320, height: 160, radius: 18 },3]);4 5const poly = painter.path2d.create([6  {7    type: 'polygon',8    points: [9      { x: 60, y: 20 },10      { x: 140, y: 180 },11      { x: 10, y: 70 },12      { x: 190, y: 70 },13      { x: 60, y: 180 },14    ],15  },16]);

1const { buffer } = await painter.createCanvas({ width: 480, height: 280, colorBg: '#0f172a' });2 3const ribbon = painter.path2d.create([4  { type: 'moveTo', x: 40, y: 200 },5  { type: 'quadraticCurveTo', cpx: 240, cpy: 40, x: 440, y: 200 },6]);7 8const framed = await painter.path2d.draw(buffer, ribbon, {9  stroke: { color: '#38bdf8', width: 6, lineCap: 'round', lineJoin: 'round' },10  shadow: { color: 'rgba(0,0,0,0.45)', blur: 12, offsetX: 0, offsetY: 6 },11});12 13const badge = painter.path2d.create([{ type: 'circle', x: 120, y: 120, radius: 72 }]);14 15const filled = await painter.path2d.draw(framed, badge, {16  fill: { color: '#334155', opacity: 0.85, rule: 'nonzero' },17  stroke: { color: '#e2e8f0', width: 3 },18});

1const { buffer } = await painter.createCanvas({ width: 640, height: 360, colorBg: '#020617' });2 3const single = await painter.path2d.custom(4  {5    startCoordinates: { x: 80, y: 180 },6    endCoordinates: { x: 560, y: 180 },7    lineStyle: { width: 5, color: '#94a3b8', lineDash: { dashArray: [14, 10], offset: 0 } },8    arrow: { end: true, size: 18, style: 'filled', color: '#f472b6' },9  },10  buffer11);12 13const multi = await painter.path2d.custom(14  [15    {16      startCoordinates: { x: 40, y: 280 },17      endCoordinates: { x: 220, y: 120 },18      path: { type: 'bezier', tension: 0.35 },19      lineStyle: { width: 4, color: '#38bdf8' },20    },21    {22      startCoordinates: { x: 220, y: 120 },23      endCoordinates: { x: 520, y: 260 },24      path: { type: 'smooth', tension: 0.45 },25      markers: [{ position: 0.5, shape: 'circle', size: 10, color: '#fde047' }],26      lineStyle: { width: 3, color: '#a78bfa' },27    },28  ],29  single30);

1const out = await painter.chain([2  { method: 'createCanvas', args: [{ width: 400, height: 240, colorBg: '#111827' }] },3  {4    method: 'path2d.custom',5    args: [6      {7        startCoordinates: { x: 48, y: 120 },8        endCoordinates: { x: 352, y: 120 },9        lineStyle: { width: 4, color: '#cbd5f5' },10        arrow: { end: true, size: 14 },11      },12      'current',13    ],14  },15]);