├── img
    ├── arc.png
    ├── text.png
    └── polygon.png
├── lib
    ├── fill.js
    ├── image.js
    ├── clear.js
    ├── index.js
    ├── line.js
    ├── rect.js
    ├── circle.js
    ├── arc.js
    ├── polygon.js
    └── text.js
├── package.json
├── license
└── readme.md


/img/arc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/semibran/canvas-paint/HEAD/img/arc.png


--------------------------------------------------------------------------------
/img/text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/semibran/canvas-paint/HEAD/img/text.png


--------------------------------------------------------------------------------
/img/polygon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/semibran/canvas-paint/HEAD/img/polygon.png


--------------------------------------------------------------------------------
/lib/fill.js:
--------------------------------------------------------------------------------
1 | module.exports = function fill(canvas, color) {
2 |   var context = canvas.getContext('2d')
3 |   context.fillStyle = color
4 |   context.fillRect(0, 0, canvas.width, canvas.height)
5 | }
6 | 


--------------------------------------------------------------------------------
/lib/image.js:
--------------------------------------------------------------------------------
1 | module.exports = function image(canvas, options) {
2 |   var context = canvas.getContext('2d')
3 |   context.drawImage(options.image, options.x, options.y, options.width || options.image.width, options.height || options.image.height)
4 | }
5 | 


--------------------------------------------------------------------------------
/lib/clear.js:
--------------------------------------------------------------------------------
1 | module.exports = function clear(canvas, rect) {
2 |   var context = canvas.getContext('2d')
3 |   if (rect) {
4 |     context.clearRect(rect.x, rect.y, rect.width, rect.height)
5 |   } else {
6 |     context.clearRect(0, 0, canvas.width, canvas.height)
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | exports.fill = require('./fill')
 2 | exports.clear = require('./clear')
 3 | exports.rect = require('./rect')
 4 | exports.circle = require('./circle')
 5 | exports.arc = require('./arc')
 6 | exports.line = require('./line')
 7 | exports.polygon = require('./polygon')
 8 | exports.image = require('./image')
 9 | exports.text = require('./text')
10 | 


--------------------------------------------------------------------------------
/lib/line.js:
--------------------------------------------------------------------------------
 1 | module.exports = function line(canvas, options) {
 2 |   var context = canvas.getContext('2d')
 3 |   context.beginPath()
 4 |   context.moveTo(options.start.x, options.start.y)
 5 |   context.lineTo(options.end.x, options.end.y)
 6 |   if (options.stroke) {
 7 |     context.strokeStyle = options.stroke.color
 8 |     context.lineWidth = options.stroke.width || 1
 9 |     context.stroke()
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |  "name": "canvas-paint",
 3 |  "version": "0.1.1",
 4 |  "description": "Helper functions for drawing onto <canvas> elements",
 5 |  "keywords": [
 6 |   "html",
 7 |   "canvas",
 8 |   "paint",
 9 |   "draw"
10 |  ],
11 |  "main": "lib",
12 |  "license": "MIT",
13 |  "author": "Brandon Semilla (https://github.com/semibran)",
14 |  "repository": {
15 |   "type": "git",
16 |   "url": "https://github.com/semibran/canvas-paint.git"
17 |  }
18 | }
19 | 


--------------------------------------------------------------------------------
/lib/rect.js:
--------------------------------------------------------------------------------
 1 | module.exports = function rect(canvas, options) {
 2 |   var context = canvas.getContext('2d')
 3 |   context.beginPath()
 4 |   context.rect(options.x, options.y, options.width, options.height)
 5 |   if (options.fill) {
 6 |     context.fillStyle = options.fill
 7 |     context.fill()
 8 |   }
 9 |   if (options.stroke) {
10 |     context.strokeStyle = options.stroke.color
11 |     context.lineWidth = options.stroke.width || 1
12 |     context.stroke()
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/lib/circle.js:
--------------------------------------------------------------------------------
 1 | module.exports = function circle(canvas, options) {
 2 |   var context = canvas.getContext('2d')
 3 |   context.beginPath()
 4 |   context.arc(options.x, options.y, options.radius, 0, 2 * Math.PI)
 5 |   if (options.fill) {
 6 |     context.fillStyle = options.fill
 7 |     context.fill()
 8 |   }
 9 |   if (options.stroke) {
10 |     context.strokeStyle = options.stroke.color
11 |     context.lineWidth = options.stroke.width || 1
12 |     context.stroke()
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/lib/arc.js:
--------------------------------------------------------------------------------
 1 | module.exports = function arc(canvas, options) {
 2 |   var context = canvas.getContext('2d')
 3 |   context.beginPath()
 4 |   context.arc(options.x, options.y, options.radius, degrees(options.start - 90), degrees(options.end - 90))
 5 |   context.lineTo(options.x, options.y)
 6 |   if (options.fill) {
 7 |     context.fillStyle = options.fill
 8 |     context.fill()
 9 |   }
10 |   if (options.stroke) {
11 |     context.strokeStyle = options.stroke.color
12 |     context.lineWidth = options.stroke.width || 1
13 |     context.stroke()
14 |   }
15 | }
16 | 
17 | function degrees(degrees) {
18 |   return degrees * Math.PI / 180
19 | }
20 | 


--------------------------------------------------------------------------------
/lib/polygon.js:
--------------------------------------------------------------------------------
 1 | module.exports = function polygon(canvas, options) {
 2 |   var context = canvas.getContext('2d')
 3 |   context.beginPath()
 4 |   for (var i = 0; i < options.points.length; i++) {
 5 |     var point = options.points[i]
 6 |     if (i === 0) {
 7 |       context.moveTo(point.x, point.y)
 8 |     } else {
 9 |       context.lineTo(point.x, point.y)
10 |     }
11 |   }
12 |   context.closePath()
13 |   if (options.fill) {
14 |     context.fillStyle = options.fill
15 |     context.fill()
16 |   }
17 |   if (options.stroke) {
18 |     context.strokeStyle = options.stroke.color
19 |     context.lineWidth = options.stroke.width || 1
20 |     context.stroke()
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/lib/text.js:
--------------------------------------------------------------------------------
 1 | module.exports = function text(canvas, options) {
 2 |   var context = canvas.getContext('2d')
 3 |   context.beginPath()
 4 |   context.textAlign = options.align || 'left'
 5 |   context.textBaseline = options.baseline || 'top'
 6 |   if (options.font) {
 7 |     var size = options.font.size || 16
 8 |     var family = options.font.family || 'sans-serif'
 9 |     context.font = size + 'px ' + family
10 |   }
11 |   if (options.fill) {
12 |     context.fillStyle = options.fill
13 |     context.fillText(options.text, options.x, options.y, options.width)
14 |   }
15 |   if (options.stroke) {
16 |     context.strokeStyle = options.stroke.color
17 |     context.lineWidth = options.stroke.width
18 |     context.strokeText(options.text, options.x, options.y, options.width)
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Brandon Semilla
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # canvas-paint
  2 | > Helper functions for drawing onto `<canvas>` elements
  3 | 
  4 | ## install
  5 | ```sh
  6 | npm install canvas-paint
  7 | ```
  8 | 
  9 | ## usage
 10 | ```js
 11 | const paint = require('canvas-paint')
 12 | ```
 13 | 
 14 | ### `fill(canvas, color)`
 15 | Fills the entire `canvas` with [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
 16 | ```js
 17 | fill(canvas, 'black')
 18 | ```
 19 | 
 20 | ### `clear(canvas, rect?)`
 21 | Clears the region on `canvas` as specified by `rect`.
 22 | ```js
 23 | clear(canvas, {
 24 |   x: canvas.height / 4,
 25 |   y: canvas.height / 4,
 26 |   width: canvas.width / 2,
 27 |   height: canvas.height / 2
 28 | })
 29 | ```
 30 | If `rect` is not provided, the entire canvas will be cleared.
 31 | 
 32 | ### `rect(canvas, options)`
 33 | ```js
 34 | rect(canvas, {
 35 |   x: 50,
 36 |   y: 25,
 37 |   width: 100,
 38 |   height: 50,
 39 |   fill: 'red'
 40 | })
 41 | ```
 42 | 
 43 | ### `circle(canvas, options)`
 44 | ```js
 45 | circle(canvas, {
 46 |   x: canvas.width / 2,
 47 |   y: canvas.height / 2,
 48 |   radius: 32,
 49 |   stroke: {
 50 |     color: 'blue',
 51 |     width: 2
 52 |   }
 53 | })
 54 | ```
 55 | 
 56 | ### `arc(canvas, options)`
 57 | ```js
 58 | arc(canvas, {
 59 |   x: canvas.width / 2,
 60 |   y: canvas.height / 2,
 61 |   radius: 48,
 62 |   start: 120,
 63 |   end: 60,
 64 |   fill: 'yellow'
 65 | })
 66 | ```
 67 | The above code draws the following image:
 68 | 
 69 | ![arc example](img/arc.png)
 70 | 
 71 | Note that `start` and `end` are provided in angles instead of radians. Also, the `anticlockwise` parameter has been omitted. The values for `start` and `end` can be switched in order to achieve the same result.
 72 | 
 73 | ### `line(canvas, options)`
 74 | ```js
 75 | line(canvas, {
 76 |   start: { x: 50, y: 25 },
 77 |   end: { x: 125, y: 5 },
 78 |   stroke: {
 79 |     color: 'black',
 80 |     width: 2
 81 |   }
 82 | })
 83 | ```
 84 | 
 85 | ### `polygon(canvas, options)`
 86 | Draws a polygon onto `canvas`.
 87 | ```js
 88 | polygon(canvas, {
 89 |   points: [
 90 |     { x: 64, y: 16 },
 91 |     { x: 112, y: 64 },
 92 |     { x: 64, y: 112 },
 93 |     { x: 16, y: 64 }
 94 |   ],
 95 |   fill: 'red'
 96 | })
 97 | ```
 98 | The above code draws the following image:
 99 | 
100 | ![polygon example](img/polygon.png)
101 | 
102 | ### `image(canvas, options)`
103 | ```js
104 | image(canvas, {
105 |   image: sprites.wall,
106 |   x: 32,
107 |   y: 16,
108 |   width: sprites.wall.width * 2,
109 |   height: sprites.wall.height * 2
110 | })
111 | ```
112 | `width` and `height` are optional - they will default to `image.width` and `image.height` if not provided.
113 | 
114 | ### `text(canvas, options)`
115 | ```js
116 | text(canvas, {
117 |   text: 'Hello world',
118 |   x: canvas.width / 2,
119 |   y: canvas.height / 2,
120 |   align: 'center',
121 |   baseline: 'middle',
122 |   font: {
123 |     size: 48,
124 |     family: 'sans-serif'
125 |   },
126 |   stroke: {
127 |     color: 'blue'
128 |   }
129 | })
130 | ```
131 | The above code draws the following image:
132 | 
133 | ![text example](img/text.png)
134 | 
135 | Additionally, a couple of minor changes have been made to the API defaults.
136 | - `font.size` defaults to `16`
137 | - `align` defaults to `'left'`
138 | - `baseline` defaults to `'top'`
139 | 
140 | ## to do
141 | - [x] basic drawing methods
142 | - [ ] make fill/stroke blocks reusable
143 | - [ ] line cap, join, dash
144 | - [ ] shadows
145 | - [ ] gradients
146 | - [ ] compositing
147 | - [ ] masking
148 | - [ ] bezier curves
149 | - [ ] transforms (translation, rotation, scaling)
150 | 
151 | ## license
152 | [MIT](https://opensource.org/licenses/MIT) © [Brandon Semilla](https://git.io/semibran)
153 | 


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