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 ( ) } } ``` ### 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); ```