# react-native-canvas

> A Canvas component for React Native

Latest version **0.1.40** (published 2024-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-canvas
pnpm add react-native-canvas
yarn add react-native-canvas
bun add react-native-canvas
```

## Health

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

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.40 |
| Published | 2024-06-02 |
| First published | 2015-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-canvas) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 69.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1017 |
| Maintainers | iddan |

## Links

- npm: https://www.npmjs.com/package/react-native-canvas
- Repository: https://github.com/iddan/react-native-canvas
- Homepage: https://github.com/iddan/react-native-canvas#readme
- Issues: https://github.com/iddan/react-native-canvas/issues
- npm.io page: https://npm.io/package/react-native-canvas

## Dependencies (1)

- [ctx-polyfill](https://npm.io/package/ctx-polyfill.md) ^1.1.4

## Recent versions

- 0.1.40 (latest) — 2024-06-02
- 0.1.39 — 2023-05-16
- 0.1.38 — 2021-08-28
- 0.1.37 — 2020-02-20
- 0.1.36 — 2020-01-03
- 0.1.34 — 2019-09-11
- 0.1.33 — 2019-05-27
- 0.1.32 — 2019-04-16
- 0.1.31 — 2019-03-20
- 0.1.30 — 2019-02-25
- 0.1.29 — 2019-02-25
- 0.1.28 — 2019-02-25
- 0.1.27 — 2019-02-18
- 0.1.26 — 2019-02-15
- 0.1.25 — 2019-01-08
- … 28 more at https://npm.io/package/react-native-canvas/versions

## README

# 🎆 react-native-canvas

A Canvas component for React Native

```bash
npm install react-native-webview
react-native link react-native-webview
npm install react-native-canvas
```

### Usage

```JSX
import React, { Component } from 'react';
import Canvas from 'react-native-canvas';

class App extends Component {

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
  }

  render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    )
  }
}
```

### API

#### Canvas

###### Canvas#height

Reflects the height of the canvas in pixels

###### Canvas#width

Reflects the width of the canvas in pixels

###### Canvas#getContext()

Returns a canvas rendering context. Currently only supports 2d context.

###### Canvas#toDataURL()

Returns a `Promise` that resolves to DataURL.

#### CanvasRenderingContext2D

Standard CanvasRenderingContext2D. [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D). Only difference is `await` should be used to retrieve values from methods.

```javascript
const ctx = canvas.getContext("2d");
```

#### Image

WebView Image constructor. Unlike in the browsers accepts canvas as first argument. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)

```javascript
const image = new Image(canvas, height, width);
```

#### Path2D

Path2D API constructor. Unlike in the browsers, this requires the canvas as first argument. See also https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D.

```javascript
const path = new Path2D(canvas);
```

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