├── example.html
├── example.png
├── index.js
├── package.json
├── example.js
└── readme.md


/example.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zeke/canvas-polygon/HEAD/example.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | module.exports = function polygon (ctx, x, y, radius, sides, startAngle, counterClockwise) {
 2 |   if (sides < 3) return
 3 |   var a = (Math.PI * 2) / sides
 4 |   a = counterClockwise ? -a : a
 5 |   ctx.save()
 6 |   ctx.translate(x, y)
 7 |   ctx.rotate(startAngle || 0)
 8 |   ctx.moveTo(radius, 0)
 9 |   ctx.beginPath()
10 |   for (var i = 1; i <= sides; i++) {
11 |     ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i))
12 |   }
13 |   ctx.closePath()
14 |   ctx.fill()
15 |   ctx.restore()
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "canvas-polygon",
 3 |   "version": "1.0.0",
 4 |   "description": "Create polygons with the Canvas API",
 5 |   "main": "index.js",
 6 |   "repository": "https://github.com/zeke/canvas-polygon",
 7 |   "author": "zeke",
 8 |   "license": "MIT",
 9 |   "devDependencies": {
10 |     "budo": "^9.4.7",
11 |     "javascript-yellow": "^1.0.4",
12 |     "standard": "^9.0.1",
13 |     "standard-markdown": "^2.3.0"
14 |   },
15 |   "scripts": {
16 |     "test": "standard && standard-markdown",
17 |     "demo": "budo example.js"
18 |   }
19 | }


--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
 1 | const polygon = require('.')
 2 | const yellow = require('javascript-yellow')
 3 | const canvasSize = 400
 4 | 
 5 | window.addEventListener('DOMContentLoaded', draw)
 6 | 
 7 | function draw () {
 8 |   var canvas = document.createElement('canvas')
 9 |   var ctx = canvas.getContext('2d')
10 |   document.body.appendChild(canvas)
11 |   canvas.width = canvasSize
12 |   canvas.height = canvasSize
13 |   ctx.fillStyle = yellow
14 |   ctx.fillRect(0, 0, canvasSize, canvasSize)
15 |   ctx.fillStyle = '#000'
16 |   polygon(ctx, canvasSize / 2, canvasSize / 2, canvasSize / 3, 6, Math.PI / 2)
17 | }
18 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # canvas-polygon
 2 | 
 3 | > Create polygons with the Canvas API
 4 | 
 5 | ## Installation
 6 | 
 7 | ```sh
 8 | yarn add canvas-polygon
 9 | ```
10 | 
11 | ## API
12 | 
13 | This module exports a single function:
14 | 
15 | ```js
16 | function polygon (ctx, x, y, radius, sides, startAngle, counterClockwise) { }
17 | ```
18 | 
19 | It takes the following arguments:
20 | 
21 | - `ctx` - a canvas context object
22 | - `x` - a Number
23 | - `y` - a Number
24 | - `radius` - a Number
25 | - `sides` - a Number greater than 2. :)
26 | - `startAngle` - a Number in radians. `Math.PI` is 180 degrees. Defaults to `0`
27 | - `counterClockwise` - a Boolean. Defaults to `false`
28 | 
29 | 
30 | ## Example
31 | 
32 | ```js
33 | const polygon = require('.')
34 | const yellow = require('javascript-yellow')
35 | const canvasSize = 400
36 | 
37 | window.addEventListener('DOMContentLoaded', draw)
38 | 
39 | function draw () {
40 |   var canvas = document.createElement('canvas')
41 |   var ctx = canvas.getContext('2d')
42 |   document.body.appendChild(canvas)
43 |   canvas.width = canvasSize
44 |   canvas.height = canvasSize
45 |   ctx.fillStyle = yellow
46 |   ctx.fillRect(0, 0, canvasSize, canvasSize)
47 |   ctx.fillStyle = '#000'
48 |   polygon(ctx, canvasSize / 2, canvasSize / 2, canvasSize / 3, 6, Math.PI / 2)
49 | }
50 | ```
51 | 
52 | To see this in your browser:
53 | 
54 | ```sh
55 | yarn && yarn demo
56 | ```
57 | 
58 | Then open [localhost:9966](http://localhost:9966/)
59 | 
60 | You should see this:
61 | 
62 | ![hexagon](./example.png)
63 | 
64 | ## Tests
65 | 
66 | ```sh
67 | npm install
68 | npm test
69 | ```
70 | 
71 | ## Dependencies
72 | 
73 | None
74 | 
75 | ## Dev Dependencies
76 | 
77 | - [budo](https://github.com/mattdesl/budo): a browserify server for rapid prototyping
78 | - [javascript-yellow](): The official color of the JavaScript logo
79 | - [standard](https://github.com/feross/standard): JavaScript Standard Style
80 | - [standard-markdown](): Test your Markdown files for Standard JavaScript Style™
81 | 
82 | 
83 | ## License
84 | 
85 | MIT
86 | 


--------------------------------------------------------------------------------