# canvas-utils
> Utility functions for the HTML5 canvas
Latest version **0.8.0** (published 2018-02-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install canvas-utils
pnpm add canvas-utils
yarn add canvas-utils
bun add canvas-utils
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.8.0 |
| Published | 2018-02-16 |
| First published | 2014-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 33.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Till Arnold |
| Maintainers | tillarnold |
| Keywords | canvas, util |
## Links
- npm: https://www.npmjs.com/package/canvas-utils
- Repository: https://github.com/tillarnold/canvas-utils
- Homepage: https://github.com/tillarnold/canvas-utils#readme
- Issues: https://github.com/tillarnold/canvas-utils/issues
- npm.io page: https://npm.io/package/canvas-utils
## Dependencies (1)
- [jvent](https://npm.io/package/jvent.md) ^1.0.2
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 0.8.0 (latest) — 2018-02-16
- 0.7.0 — 2018-02-08
- 0.6.0 — 2015-03-07
- 0.5.0 — 2014-11-02
- 0.4.0 — 2014-10-13
- 0.3.2 — 2014-10-06
- 0.3.1 — 2014-10-06
- 0.3.0 — 2014-10-06
- 0.2.0 — 2014-09-26
- 0.1.0 — 2014-09-12
- 0.0.1 — 2014-08-15
## README
# canvas-utils
[](http://badge.fury.io/js/canvas-utils)
[](https://codeclimate.com/github/tillarnold/canvas-utils)
[](https://travis-ci.org/tillarnold/canvas-utils)
[](https://david-dm.org/tillarnold/canvas-utils#info=devDependencies)
[](https://coveralls.io/r/tillarnold/canvas-utils?branch=master)
> Utility functions for working with the HTML5 canvas
# functions
```js
var canvasUtils = require('canvas-utils');
```
## canvasUtils.convertEventCoords(e, canvas)
This function returns the coordinates of mouse events relative to a
DOM element. For example a Canvas.
`e` is a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).
`canvas` is a a DOM element.
returns an Object with a `x` and `y` property representing the
pixel on the canvas that the event was fired on.
```js
canvas.addEventListener('click', function(event) {
var xy = convertEventCoords(event, canvas);
canvas.getContext('2d').fillRect(xy.x,xy.y,10,10)
});
```
This is a little verbose. For a nicer way to do this have a look at the [CanvasEventEmitter](#canvaseventemitter)
## canvasUtils.rotateContextAt(ctx, x, y, rotation)
Rotates a context around a point.
`ctx` is a [CanvasRenderingContext2D](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D).
(That's the thing you get when you do `canvas.getContext('2d')`)
`x` is the x-coordinate of the rotation.
`y` is the y-coordinate.
`rotation` is the rotation in radians.
Returns the `ctx` passed in.
## canvasUtils.radiansToDegrees(radians)
Converts `radians`to degrees.
## canvasUtils.degreesToRadians(degrees)
Converts `degrees`to radians.
# CanvasEventEmitter
```js
var createCanvasEventEmitter = require('canvas-utils').createCanvasEventEmitter;
```
## var cee = createCanvasEventEmitter(target, eventSource = window.document);
`target` is the canvas for which events should be emitted.
`eventSource` is the element where the event listeners are attached. It defaults to `window.document`.
[Demo for the CanvasEventEmitter on requirebin](http://requirebin.com/?gist=48c497080c0d4f1dea9a)
## Events
A `CanvasEventEmitter` is a [`jvent` EventEmitter](https://github.com/pazguille/jvent). `jvent` is a small EventEmitter that behaves pretty much like a standard node EventEmitter. It emits the following events:
| Events with synonyms |
|-----------------------------|
| `mouseup` |
| `mousedown` |
| `mousemove` |
| `mouseover`, `mousein` |
| `mouseleave`, `mouseout` |
| `click` |
| `leftclick` |
| `contextmenu`, `rightclick` |
The event object you get for all of these looks like this:
| Property | Description |
|----------------|-------------------------------------------------------|
| x | the x coordinate of the event relative to the canvas |
| y | the y coordinate of the event relative to the canvas |
| target | the canvas the event belongs to (The `target` you passed into the constructor) |
| event | the original DOM event emitted on the `eventSource` |
| button | the button property from the `event` |
| preventDefault | a function that calles `preventDefault` on the `event` |
```js
cee.on('click',function(e){
e.preventDefault();
ctx.fillRect(e.x-5,e.y-5,10,10);
});
```
## Release History
* 2018-02-16 v0.8.0 Use `jvent` and add synonyms for some events.
* 2018-02-08 v0.7.0 Add imageDataHelper.
* 2015-03-07 v0.6.0 Is now written in ES6.
* 2014-11-02 v0.5.0 Add `radiansToDegrees` and `degreesToRadians`.
* 2014-10-13 v0.4.0 Add `mouseover` and `mouseout` events.
* 2014-10-06 v0.3.2 Fix README typo.
* 2014-10-06 v0.3.1 Fix e.button and e.preventDefault().
* 2014-10-06 v0.3.0 Improve convertEventCoords.
* 2014-09-26 v0.2.0 Add contextmenu event.
* 2014-09-12 v0.1.0 Add CanvasEventEmitter.
* 2014-08-16 v0.0.1 Initial version.
---
_Source: https://npm.io/package/canvas-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._