Function drawPath

Draws a path on the provided canvas context.

Example

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

const context = canvas.getContext('2d')!;

// Default options
drawPath(context, [[50, 50], [150, 100], [100, 200], [50, 150]]);

// Draw an open path
const openPath: T_Path = [
  [50, 50],
  [150, 100],
  [100, 200],
  [50, 150],
];

drawPath(context, openPath, {
  strokeColor: 'blue',
  lineWidth: 2,
  closePath: false,
});

// Draw a closed polygon
const closedPath: T_Path = [
  [200, 200],
  [300, 200],
  [250, 300],
];

drawPath(context, closedPath, {
  strokeColor: 'red',
  fillColor: 'rgba(255, 0, 0, 0.3)',
  lineWidth: 3,
  closePath: true,
});
Copy