https://github.com/petervdn/arc-path

Draw canvas arc-paths that have a width and equal spacing.
https://github.com/petervdn/arc-path

arc arc-path canvas draw gap path spacing

Last synced: 4 months ago
JSON representation

Draw canvas arc-paths that have a width and equal spacing.

• Host: GitHub
• URL: https://github.com/petervdn/arc-path
• Owner: petervdn
• License: mit
• Created: 2018-03-29T12:46:21.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-26T09:57:21.000Z (almost 8 years ago)
• Last Synced: 2025-10-05T08:35:49.154Z (8 months ago)
• Topics: arc, arc-path, canvas, draw, gap, path, spacing
• Language: TypeScript
• Homepage:
• Size: 209 KB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# arc-path

Draws an arc-path on a canvas, with adjustable width and equal spacing.

## install

```sh

npm install arc-path

```

## usage

The library exposes the `drawArcPath` method which can be used like so:

```javascript

import drawArcPath from 'arc-path';

drawArcPath(

  context,

  centerX,

  centerY,

  startRadians,

  endRadians,

  outerRadius,

  innerRadius,

  partSpacing,

 );

context.fill();

```

The method draws a path for the following blue shape:

![picture](https://i.imgur.com/E3OzSGc.png)

- `drawArcPath` only draws a path, so you will need to do a `fill()` or `stroke()` call after it

- the path consists of four parts: two arcs and two straight lines, drawn clockwise and in the order as shown in the image

- the dashed black lines represent the `startRadians` and `endRadians`

- the magenta line has a length half of the `partSpacing` (and is perpendicular to the dashed line)

- the dashed line and the blue edge across are parallel, so the distance between them is half the `partSpacing` on every location (not just on the magenta line)

- the method returns an object containing the positions of all four points in the image: `outerStart`, `outerEnd`, `innerStart` and `innerEnd`

## but... why

The reason you would want to use this is to draw a full circle of several parts, all with an equal amount of `partSpacing` between them (instead of a gap that grows wider towards the outer edges)

![picture](https://i.imgur.com/iHqzT5C.png)

An interactive example can be found [here](https://petervdn.github.io/arc-path/example/).