canvas-dashed-arc

an API to draw dashed arc in canvas of HTML5

When will you need this

You won't, unless your weirdo designer co-worker ask you to draw a dashed arc.

How it works

A method named dashedArc is added onto CanvasRenderingContext2D.prototype.

How to use

Installation

Browser

<script src="./path/to/canvas-dashed-arc.bundle.js"></script>

Npm

$ npm install canvas-dashed-arc --save

Demo

Check the demo.

import 'canvas-dashed-arc';
 
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.setAttribute('width', 400);
canvas.setAttribute('height', 300);
 
const ctx = canvas.getContext('2d');
 
ctx.beginPath();
ctx.dashedArc(200, 150, 100, 0, 2 * Math.PI, 90);
ctx.stroke();

demo

Syntax

void ctx.arc(x, y, radius, startAngle, endAngle, parts [, anticlockwise]);

x

The x coordinate of the arc's center.

y

The y coordinate of the arc's center.

radius

The arc's radius.

startAngle

The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.

endAngle

The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.

parts

The segment number (including blank parts) the arc will be devided into.

anticlockwise [Optional]

An optional Boolean which, if true, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.