# canvas-camera-2d

> A canvas wrapper for a 2D camera

Latest version **0.5.5** (published 2018-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install canvas-camera-2d
pnpm add canvas-camera-2d
yarn add canvas-camera-2d
bun add canvas-camera-2d
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.5 |
| Published | 2018-11-19 |
| First published | 2018-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 18.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Fritz Lekschas |
| Maintainers | flekschas |
| Keywords | canvas, 2d, camera, webgl |

## Links

- npm: https://www.npmjs.com/package/canvas-camera-2d
- Repository: https://github.com/flekschas/canvas-camera-2d
- Issues: https://github.com/flekschas/canvas-camera-2d/issues
- npm.io page: https://npm.io/package/canvas-camera-2d

## Dependencies (6)

- [gl-matrix](https://npm.io/package/gl-matrix.md) ^2.8.1
- [is-key-down](https://npm.io/package/is-key-down.md) ^0.1.0
- [scroll-speed](https://npm.io/package/scroll-speed.md) github:flekschas/scroll-speed
- [mouse-pressed](https://npm.io/package/mouse-pressed.md) ^1.0.0
- [mouse-position](https://npm.io/package/mouse-position.md) ^2.1.0
- [camera-2d-simple](https://npm.io/package/camera-2d-simple.md) ^2.0.0-rc2

## 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.5.5 (latest) — 2018-11-19
- 0.5.4 — 2018-11-19
- 0.5.3 — 2018-10-30
- 0.5.2 — 2018-10-25
- 0.5.1 — 2018-10-25
- 0.5.0 — 2018-10-25
- 0.4.0 — 2018-10-19
- 0.1.0 — 2018-09-08

## README

# Canvas Warpper for 2D Camera

[![npm version](https://img.shields.io/npm/v/canvas-camera-2d.svg)](https://www.npmjs.com/package/canvas-camera-2d)
[![node stability](https://img.shields.io/badge/stability-experimental-EC5314.svg)](https://nodejs.org/api/documentation.html#documentation_stability_index)
[![build status](https://travis-ci.org/flekschas/canvas-camera-2d.svg?branch=master)](https://travis-ci.org/flekschas/canvas-camera-2d)
[![gzipped size](https://img.shields.io/badge/gzipped%20size-1.2%20KB-6ae3c7.svg)](https://unpkg.com/canvas-camera-2d)
[![code style prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![demo](https://img.shields.io/badge/demo-online-6ae3c7.svg)](https://flekschas.github.io/regl-scatterplot/)

> A wrapper for [camera-2d](https://github.com/flekschas/camera-2d) that supports pan, zoom, and rotate.

Controls are as follows:

- Pan - Left click and hold + mouse move
- Zoom - Scroll or Alt + Left click and hold with vertical mouse move
- Rotate - Right click or Control + Left click

Based on [orbit-camera](http://github.com/mikolalysenko/orbit-camera).

Also see:

- [regl-scatterplot](https://github.com/flekschas/regl-scatterplot) for an application and a [demo](https://flekschas.github.io/regl-scatterplot/).

## Install

```
npm i canvas-camera-2d
```

## API

```javascript
import canvasCamera2d from "canvas-camera-2d";
```

### camera = canvasCamera2d(canvas[, options])

Attaches a modified `camera-2d-simple` instance to the `canvas`, i.e., attaching the required event listeners for interaction.

The following options are available:

- `distance`: initial distance of the camera. [dtype: number, default: `1`]
- `target`: x, y position the camera is looking in GL coordinates. [dtype: array of numbers, default: `[0,0]`]
- `rotation`: rotation in radians around the z axis. [dtype: number, default: `0`]
- `isFixed`: if `true` panning, rotating, and zooming is disabled. [dtype: bool, default: `false`]
- `isPan`: if `true` panning is enabled. [dtype: bool, default: `true`]
- `panSpeed`: initial panning speed. [dtype: number, default: `1`]
- `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
- `rotateSpeed`: initial panning speed. [dtype: number, default: `1`]
- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
- `zoomSpeed`: initial zooming speed. [dtype: number, default: `1`]

**Returns** a new 2D camera object.

The [camera's API](https://github.com/flekschas/camera-2d#api) is augmented with the following additional endpoints:

#### `camera.tick()`

Call this at the beginning of each frame to update the current position of the camera.

#### `camera.refresh()`

Call after the width and height of the related canvas object changed.

_Note: the camera does **not** update the width and height unless you tell it to using this function!_

**Returns** `[relX, relY]` the WebGL position of `x` and `y`.

#### `camera.dispose()`

Unsubscribes all event listeners.

#### `camera.config(options)`

Configure the canvas camera. `options` accepts the following options:

- `isFixed`: if `true` panning, rotating, and zooming is disabled. [default: `false`]
- `isPan`: if `true` panning is enabled. [dtype: bool, default: `true`]
- `panSpeed`: panning speed. [dtype: float, default: `1.0`]
- `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
- `rotateSpeed`: rotation speed. [dtype: float, default: `1.0`]
- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
- `zoomSpeed`: zooming speed. [dtype: float, default: `1.0`]

---
_Source: https://npm.io/package/canvas-camera-2d · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._