https://github.com/iddan/react-native-canvas

A Canvas component for React Native
https://github.com/iddan/react-native-canvas

canvas graphics javascript native react

Last synced: 5 days ago
JSON representation

A Canvas component for React Native

• Host: GitHub
• URL: https://github.com/iddan/react-native-canvas
• Owner: iddan
• License: mit
• Created: 2015-04-09T07:53:25.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-06-02T10:23:51.000Z (7 months ago)
• Last Synced: 2024-10-29T13:49:41.212Z (2 months ago)
• Topics: canvas, graphics, javascript, native, react
• Language: JavaScript
• Homepage:
• Size: 1.3 MB
• Stars: 989
• Watchers: 24
• Forks: 172
• Open Issues: 30
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

• awesome-react-native - react-native-canvas ★421 - A Canvas element for React Native (Components / UI)
• awesome-canvas - react-native-canvas - A Canvas component for React Native.   (Libraries / Others)

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';

const App = () => {

  const handleCanvas = (canvas) => {

    if (!canvas) return;

    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'purple';

    ctx.fillRect(0, 0, 100, 100);

  };

  return (

    

  );

}

```

### 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);

```